js实现轮播

最近写网页遇到轮播的问题。之前只是试着用css3过渡来实现  结果发现不行 因为过渡的话当到达最后一张图片的时候需要过度到第一张图片就会出现倒回来状况 无法做到无缝  所以要想实现无缝轮播就得由js来写

无缝轮播的原理：宽度设为总的轮播内容宽度  移动的方式是每次移动很小的宽度 比如一张页面宽度是1920px打算1秒移动完毕 那么我可以是每次移动花费20毫秒的时间  那么每次移动的宽度就是 总共移动的时间除去单次移动的时间得到要移动多少次 再用宽度除以次数就得到了每次需要移动宽度比如上面的就是1920/（1000/20）=38.4次。

采用递归和计时器来实现移动 即递归里面每次调用自己的时间都是20ms 

不停的一张一张的移动也是靠定时器 即一段时间后在外部调用该函数

这里用的定时器是setInterval（）前面用的是 setTimeout （）两者的区别是前面可以不断的调用自己  而后面的只调用一次 如果要实现前面一样的效果的是需要用循环  无缝的实现是靠在第一张图片前面加上最后一张图片  在最后一张图片后面加上第一张图片 所以现在总共就是之前总的图片加上为了实现无缝轮播而加上的两张图片 每次到最后的时候瞬间切换到切换到第一张 到第一张的时候瞬间切换到最后一张

下面上精简过的代码：

window.onload = function() {  
var turn_left = $(".div_class_homePage .homepage_left a");//向左的按钮  
var turn_right = $(".div_class_homePage .homepage_right a");//向右的按钮  
var lunbo_first = $(".div_class_homePage .lun_bo_container .index_first");//第一张图片  
var length = parseInt(lunbo_first.css("width"));  
var is_lunbo = false;//只有is_luobo为false的时候 才可以继续点击  这是为了实现只有当前移动图片移动完毕过后才能继续点击
var page = 1;  
//自动轮播  设置一个调用animate的函数
var timer = setInterval(function() {  
animate(-length);  
}, 5000);  
//向左  
turn_left.click(function() {  
if(!is_lunbo) {  
clearInterval(timer);  
animate(length);  
}  
});  
//向右  
turn_right.click(function() {  
if(!is_lunbo) {  
clearInterval(timer);  
animate(-length);  
}  
});  
//轮播函数 参数是移动的距离    这个函数是实现轮播的关键
function animate(var1) {  
is_lunbo = true;  
var margin_left = parseInt(lunbo_first.css("margin-left"));  
var new_margin = margin_left + var1;  
var times = 500;  
var time = 10;  
var one_length = var1 / (times / time);  
page = new_margin / length;  
if(page < 0)  
page = -page;  
//单张页面移动  
function go() {  
var new_margin_left = parseInt(lunbo_first.css("margin-left"));  
if(var1 < 0 && new_margin_left > new_margin || var1 > 0 && new_margin_left < new_margin) {  
new_margin_left = new_margin_left + one_length + "px";  
lunbo_first.css("margin-left", new_margin_left);  
setTimeout(go, 10);//核心代码  
} else {  
is_lunbo = false;  
if(var1 > 0) {  
if(new_margin >= 0) {  
new_margin = -3 * length;  
}  
} else {  
if(new_margin <= -4 * length) {  
new_margin = -length;  
}  
}  
new_margin = new_margin + "px";  
lunbo_first.css("margin-left", new_margin);  
}  
}  
go();  
}  
}