图片轮播/无缝滚动的原理

轮播就是经过定时器控制图片的盒子的边距进行变化，从而达到看上去轮播的现象。经常使用来网站首页轮播图，商品展现等不少种状况。

无缝轮播就是看起来是一个方向不停地轮换展现，实现该效果有两个思路，一个就是在自己图片的后面追加一组同样的图片，避免出现空白，从而达到无缝的假象；另外一种思路就是每次都把第一张图片放到最后，边距清零，或者定位清零，每执行一次就清空一次，从而达到效果的假象。下面咱们一一介绍。

若是布局不会就看上一篇笔记，图片轮播就是当图片到最后一张的时候，把图片的box调整到最初的位置，让边距或者定位为0。代码以下：

var index = 0; var tick = setInterval(function () { index++; if (index < 10) {//10表明图片的张数 $("ul").animate({"margin-left": -210 * index}, 1000);//210每一个图片的宽度 } else { index = 0; $("ul").animate({"margin-left": -210 * index}, 1);//1毫秒完成动画 } }, 1);//1毫秒执行一次

 

效果是匀速轮播，这种方法为了显示轮播避免空白出现须要复制一组图片追加到ul并且最后会闪一下，最后一张图片没有动画效果，不推荐。

第二种是匀速轮播，效果是一张走完另外一张在执行动画，避免了后期鼠标悬浮出现半个图片的问题。缺点，频繁调用服务器资源。

function scroll() { $("ul").animate({"margin-left": "-210px"}, 1000,function () { $(" ul li:eq(0)").appendTo($("ul")); $("ul").css({"margin-left": 0}); }); } setInterval(function(){scroll()}, 500);// setInterval(scroll, 500);//这两种写法均可以

 

效果是无缝轮播，这个办法比较易于理解，可是代码过于臃肿，不简洁，不推荐使用。经过两个按钮，两个计时器控制左右边距进行控制左右方向的轮播。

匀速滚动一 能够设置一个函数让它边距每多久执行一次函数 var i = 0; function autoLeft() { i -= 2; $("ul").css({"margin-left": i}); if (i < -2100) { i = 0; $("ul").css({"margin-left": 0}); } } function autoRight() { i += 2; $("ul").css({"margin-left": i}); if (i > 0) { i = -2100; $("ul").css({"margin-left": -2100}); } } var tickL = setInterval(autoLeft, 30); var tickR = setInterval(autoRight, 30); clearInterval(tickR); $("#leftbtn").click(function () { clearInterval(tickL); clearInterval(tickR); tickL = setInterval(autoLeft, 30); }); $("#rightbtn").click(function () { clearInterval(tickL); clearInterval(tickR); tickR = setInterval(autoRight, 30); });

 

效果无缝匀速滚动，推荐使用。经过控制变量的正负值从而达到控制轮播的方向。难点在于判断，经过两个变量，一个控制累加，一个控制边距，这样就更利于判断，边距分开写不要写入函数体内，分开执行。更易于理解。

var i = -2, j = 0; function auto() { $("ul").css({"margin-left": j += i}); if (j < -2100) { j = 0; $("ul").css({"margin-left": j}); } else if (j > 0) { j = -2100; $("ul").css({"margin-left": j}); } ; } var tick; function autoPlay() { clearInterval(tick); tick = setInterval(function () { auto(); }, 20); }; autoPlay(); $("#leftbtn").click(function () { i = -2; }); $("#rightbtn").click(function () { i = 2; }); $("div").hover(function(){ clearInterval(tick); },function(){ clearInterval(tick); autoPlay(); });