jquery手动与定时自动轮播效果展示及程序实现要点
你是不是正为轮播图代码出现的Bug烦恼得不行？这篇文章，直接就把手动点击以及自动轮播相互冲突所产生的坑给填好了，而且还附带了完整的修改方案，能够帮你省下最少两小时的调试所用时间。
自动轮播的核心原理
定时自动轮播得以实现实则并未十分复杂，其本质乃是要让程序去模拟人的行动 ，首先得在JavaScript里开启一个定时器 ，像将时间间隔设置成2000毫秒 ，也即为两秒钟执行一回函数 ，此函数内部所做之事 ，就恰似你用手去点击数字按钮那般 ，触发click事件 ，使图片容器向左边移动一定的距离。
要达成这个逻辑，仅需寥寥几行代码就行，然而存在一个细节极易被忽视。定时器每一回执行之际，得清楚当下所显示的图是第几张，唯有如此方可进行下一张图位置的计算。一般会借助一个变量iNow去记录当下的索引值，每执行一次便让iNow加1，而后调用移动函数。
轮播图①（手动点击轮播）
循环播放的边界处理
要是你仅仅编写了定时器递增的那种逻辑，就会发觉图片播放到最后一张的时候就会卡住不再动弹了。这是由于iNow持续不断地加下去，进而超出了图片数量所涵盖的范围。把这个问题妥善解决掉就得要在每次进行增加操作之后开展一个判断：要是iNow等同于图片总数，那就将它重新设定为0，从而让播放器返回到第一张再次开启播放。
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.slideShow{
width: 346px;
height: 210px; /*其实就是图片的高度*/
border: 1px #eeeeee solid;
margin: 100px auto;
position: relative;
overflow: hidden; /*此处需要将溢出框架的图片部分隐藏*/
}
.slideShow ul{
width: 2000px;
position: relative; /*此处需注意relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置，如果没有这个属性，图片将不可左右移动*/
}
.slideShow ul li{
float: left; /*让四张图片左浮动，形成并排的横着布局，方便点击按钮时的左移动*/
width: 346px;
}
.slideShow .showNav{ /*用绝对定位给数字按钮进行布局*/
position: absolute;
right: 10px;
bottom: 5px;
text-align:center;
font-size: 12px;
line-height: 20px;
}
.slideShow .showNav span{
cursor: pointer;
display: block;
float: left;
width: 20px;
height: 20px;
background: #ff5a28;
margin-left: 2px;
color: #fff;
}
.slideShow .showNav .active{
background: #b63e1a;
}
许多网站的轮播图里都能见到这种处理方式，像淘宝首页的商品推荐区，其也是运用同样的逻辑达成无限循环。你于浏览器的开发者工具之中查看这些网站的源码，就会发觉它们的判断逻辑与我们所写的大概相同。
手动点击引发的混乱
自动轮播成功运行后，你觉得就万事大吉了吗？此时去尝试手动点击下方的数字按钮，麻烦随即就出现了。手动点击的确能够切换至相应的图片，然而当下一个定时器启动时，它又会依照原本的顺序持续播放，对你方才点击了哪个按钮全然不予理会。
这个问题出现的缘由是，两处的索引未贯通。手动摁下按钮之际，虽说图片已然切换过去，然而定时器所运用的那个 iNow 变量并不晓得此变化，它依旧依照自身的节奏递增。这恰似两人各自记录账目，最终必定无法对齐吻合。
var timer=null; //定时器返回值，主要用于关闭定时器
var iNow=0; //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0
timer=setInterval(function(){ //打开定时器
iNow++; //让图片的索引值次序加1，这样就可以实现顺序轮播图片
showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click事件
},2000); //2000为轮播的时间
打通索引的修改方案
若要将此问题予以解决，那么在手动进行点击操作之际，需把当下按钮的索引值传递给定时器的变量以实现同步，具体的实施办法为，于按钮的点击事件当中，除了让图片进行移动操作之外，还得将iNow的值更新成你所点击的那个索引，如此一来，当接下来定时器触发之时，其便会依据新的iNow值并持续往后播放。
var timer=null; //定时器返回值，主要用于关闭定时器
var iNow=0; //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0
timer=setInterval(function(){ //打开定时器
iNow++; //让图片的索引值次序加1，这样就可以实现顺序轮播图片
if(iNow>showNumber.length-1){ //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始
iNow=0;
}
showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click
},2000); //2000为轮播的时间
修改好了之后要多次进行测试，分别去尝试在播放至第二张的时候点击第五张，在播放至第三张的时候点击第一张，要保证不管以怎样的方式去操作，自动轮播的起始点都能够和手动点击的位置维持一致。把这一步做好了，轮播图才可以说是真正能够使用。
完整代码的调试要点
$(document).ready(function(){
var slideShow=$(".slideShow"), //获取最外层框架的名称
ul=slideShow.find("ul"),
showNumber=slideShow.find(".showNav span"),//获取按钮
oneWidth=slideShow.find("ul li").eq(0).width(); //获取每个图片的宽度
var timer=null; //定时器返回值，主要用于关闭定时器
var iNow=0; //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0
showNumber.on("click",function(){ //为每个按钮绑定一个点击事件
$(this).addClass("active").siblings().removeClass("active"); //按钮点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉
var index=$(this).index(); //获取哪个按钮被点击，也就是找到被点击按钮的索引值
ul.animate({
"left":-oneWidth*iNow, //注意此处用到left属性，所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度，N根据被点击的按钮索引值index确定
})
});
timer=setInterval(function(){ //打开定时器
iNow++; //让图片的索引值次序加1，这样就可以实现顺序轮播图片
if(iNow>showNumber.length-1){ //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始
iNow=0;
}
showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click
},2000); //2000为轮播的时间
})
那在最终版本的代码当中，注释是能够写得更为详细一些的，如此一来方便往后自己去查看，也能够便于给其他人进行讲解。不过呢，在实际开展工作期间，注释并非是需要每行都去写的，仅仅只要把关键的逻辑说明清楚便可以了。就好比定时器开始启动以及清除的位置，还有索引同步的地方所在之处，这些地方都是比较容易出现错误的关键点，要是将其标记得足够清楚的话那就能够省去许多排查所需要耗费的时间。
那在进行调试操作之际，能够运用浏览器所具备的断点这项功能，以此一个步骤接着一个步骤地去查看变量的相关变化状态。需要将鼠标悬浮停歇在iNow之上，进而针对其在你通过手动方式进行点击之后，是不是即刻就转变成为正确的那个具体数值作出观察，还要看看定时器触发的时刻，是不是依据这个全新得到的值继而开展运算的。
后续功能的扩展思路
已有版本已然解掉了自动展示以及手动触碰的矛盾状况，下一个时期能够添加上鼠标悬浮停留而暂停的功用。此等机理其实也蛮简易的：对展现横幅的容器的鼠标进入事件予以监听，于其中清除计时器具；对鼠标离开事件进行监听，在里面再度启动计时器具。
好多从事商业活动的网站皆是如此这般去施行的，举例来说就像京东平台里的商品详情展示页面，当把鼠标放置上去的时候轮播就会停下，以此便利您能够细致地去查看商品的图片，而当移开之后那般轮播又会接着进行播放。此项功能尽管规模不大，然而对于用户体验的增强却是相当显著的。
写代码之际，你碰到过这般自动与手动相冲突的坑不？那时，耗费了多长时间才寻觅到缘由呢？欢迎于评论区分享你的调试经历，点个赞以使更多受轮播图困扰的小伙伴瞧见这篇文章。
