图片轮播/无缝滚动的原理
轮播就是通过定时器控制图片的盒子的边距进行变化，从而达到看上去轮播的现象。常用来网站首页轮播图，商品展示等很多种情况。
无缝轮播就是看起来是一个方向不停地轮换展示，实现该效果有两个思路，一个就是在本身图片的后面追加一组一样的图片，避免出现空白，从而达到无缝的假象；另一种思路就是每次都把第一张图片放到最后，边距清零，或者定位清零，每执行一次就清空一次，从而达到效果的假象。下面我们一一介绍。
如果布局不会就看上一篇笔记，图片轮播就是当图片到最后一张的时候，把图片的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(); }); |
