js轮播图无缝滚动效果


Posted in Javascript onJune 17, 2017

在做轮播图时如果首尾不能连起来的话,效果会有点丑,下面介绍一种我常用的方法:

先文字说明一下:

如果要展示5张图,分别为1,2,3,4,5  那么在代码的引入中是这样的:1,2,3,4,5,1

按顺序的轮播在此就不多说,重点说的是5>1和1>5的轮播

i  表示当前图片的索引

pre 表示上一张图片的按钮

next 表示下一张图片的按钮

ul 表示图片列表

(1)  5>1>2...   当“next”按钮从5到1时按顺序正常轮播,当前图片为第二个“1”时,下一张图片应该是“2”,那么再“next”时是ul的left的值为0,i==1;

(2) 1>5>4....  当“pre”按钮从当前图片“1”(第一个1)轮播到图片5时,i==4,ul的left值变为img宽的-5倍,也就是让第一个1悄悄的变为最后一个1;

用语言表述有点乱,下面放代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
 *{padding: 0;margin: 0;}
 .container{
 width: 273px;height: 163px;overflow: hidden;
 position: relative;margin: 0 auto;
 }
 .list{
 position: absolute;width: 1638px;top: 0;left: 0px;
 }
 .list li{
 float: left;list-style: none;
 }
 .btn{
 position: absolute;display: block;width: 40px;height: 50px;font-size: 40px;
 text-align: center;font-weight: bold;top: 50%;margin-top: -25px;background-color: rgba(255,255,255,0.5);cursor:pointer;
 }
 .btn:hover{
 background-color: rgba(0,0,0,0.3);color: #fff;
 }
 .pre{
 left: 0;
 }
 .next{
 right: 0;
 }
 .nav{
 position: absolute;bottom: 5px;display: flex;justify-content: center;width: 100%;
 }
 .nav span{
 width: 10px;height: 10px;border-radius: 10px;background-color: #fff;z-index: 2;display: inline-block;margin-right: 10px;cursor: pointer;
 }
 span.on{
 background-color: orange;
 }
 </style>
</head>
<body>
 <div class="container">
 <ul class="list" style="left: 0px">
 <li><img src="./images/1.png" alt=""></li>
 <li><img src="./images/2.png" alt=""></li>
 <li><img src="./images/3.png" alt=""></li>
 <li><img src="./images/4.png" alt=""></li>
 <li><img src="./images/5.png" alt=""></li>
 <li><img src="./images/1.png" alt=""></li>
 </ul>
 <div class="nav">
 <span class="on"></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 </div>
 <em class="next btn">></em>
 <em class="pre btn"><</em>
 </div>
 <script type="text/javascript" src="../jquery.js"></script>
 <script type="text/javascript">
 $(function(){
 var i=0;
 $('.next').click(function(){
 i++;
 console.log(i);
 
 moveImg(i);
 
 });
 $('.pre').click(function(){
 i--;
 moveImg(i);
 
 });
 $('.nav span').click(function(){
 var _index=$(this).index();
 i=_index;
 moveImg(i);
 
 
 });
 // i的作用:决定下一张图片是谁————也就是说ul的left是多少。
 // $('.list').css({left)的值是从图a过度是此时的ul的left。
 function moveImg(){
 if (i==6) {
 i=1;
 $('.list').css({'left':'0'});
 }
 // 是第一张
 if(i==-1){
 i=4;
 $('ul').css({left:(5*-273)});
 }
 $('.list').stop().animate({'left':-273*i+'px'},1000);
 if (i==5) {
 $('.nav span').eq(0).addClass('on').siblings().removeClass('on');
 
 }
 $('.nav span').eq(i).addClass('on').siblings().removeClass('on');
 
 }
 })
 </script>
</body>
</html>

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 原型学习总结
Oct 29 Javascript
jQuery之过滤元素操作小结
Nov 30 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
Jan 09 Javascript
jQuery插件Validate实现自定义校验结果样式
Jan 18 Javascript
jquery+ajax实现直接提交表单实例分析
Jun 17 Javascript
深入理解Angularjs中的$resource服务
Dec 31 Javascript
canvas滤镜效果实现代码
Feb 06 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
Mar 01 Javascript
node中modules.exports与exports导出的区别
Jun 08 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Oct 12 Javascript
vue element 中的table动态渲染实现(动态表头)
Nov 21 Javascript
JS正则表达式验证密码强度
Mar 18 Javascript
详解webpack+vue-cli项目打包技巧
Jun 17 #Javascript
vue-router单页面路由
Jun 17 #Javascript
详解JS获取HTML DOM元素的8种方法
Jun 17 #Javascript
JavaScript输入框字数实时统计更新
Jun 17 #Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
Jun 17 #Javascript
bootstrap paginator分页前后台用法示例
Jun 17 #Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
Jun 17 #Javascript
You might like
SONY SRF-22W(33W)的电路分析和维修案例
2021/03/02 无线电
用PHP 4.2书写安全的脚本
2006/10/09 PHP
php 无限级数据JSON格式及JS解析
2010/07/17 PHP
详解Yii2 定制表单输入字段的标签和样式
2017/01/04 PHP
YII2框架中使用yii.js实现的post请求
2017/04/09 PHP
php函数式编程简单示例
2019/08/08 PHP
jQuery使用andSelf()来包含之前的选择集
2014/05/19 Javascript
JavaScript编写推箱子游戏
2015/07/07 Javascript
Javascript使用post方法提交数据实例
2015/08/03 Javascript
JQuery学习总结【一】
2016/12/01 Javascript
Angular工具方法学习
2016/12/26 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
2017/03/24 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
2018/12/10 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
2020/02/16 Javascript
JavaScript 异步时序问题
2020/11/20 Javascript
在Windows8上的搭建Python和Django环境
2014/07/03 Python
Python判断列表是否已排序的各种方法及其性能分析
2016/06/20 Python
基于python中pygame模块的Linux下安装过程(详解)
2017/11/09 Python
详谈在flask中使用jsonify和json.dumps的区别
2018/03/26 Python
对tf.reduce_sum tensorflow维度上的操作详解
2018/07/26 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
selenium+Chrome滑动验证码破解二(某某网站)
2019/12/17 Python
Python 高效编程技巧分享
2020/09/10 Python
PHP数据运算类型都有哪些
2013/11/05 面试题
大学四年职业生涯规划书范文
2014/01/02 职场文书
标准自荐信范文
2014/01/29 职场文书
办公自动化专业大学生职业规划书
2014/03/06 职场文书
师恩难忘教学反思
2014/04/27 职场文书
投标承诺书怎么写
2014/05/24 职场文书
关于读书的活动方案
2014/08/14 职场文书
买房子个人收入证明
2014/10/12 职场文书
升学宴学生致辞
2015/09/29 职场文书
基于Go Int转string几种方式性能测试
2021/04/28 Golang
七个非常实用的Python工具包总结
2021/06/15 Python
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers
python turtle绘图
2022/05/04 Python