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

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

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

如果布局不会就看上一篇笔记，图片轮播就是当图片到最后一张的时候，把图片的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();

});