<上一条：jquery读取jsonp数据代码
下一条： jquery经典自动轮播选项卡代码 >
左右带箭头自动切换代码
发布-xiaoming | 浏览量-
//轮播图自动切换代码
var page = 1;
var i = 3; //每版放4个图片
var len = $(".roll_list ul li").length;
var page_count = Math.ceil(len / i) ;
var none_unit_width = 723; //获取框架内容的宽度,不带单位
var ad_time
var $parent = $(".roll_list ul");
//向右 按钮
$(".button_r").click(function(){
clearInterval(ad_time);
if( !$parent.is(":animated") ){
if( page == page_count ){ //已经到最后一个版面了,如果再向后，必须跳转到第一个版面。
$parent.animate({ left : 0}, 800); //通过改变left值，跳转到第一个版面
page = 1;
}else{
$parent.animate({ left : '-='+none_unit_width}, 800); //通过改变left值，达到每次换一个版面
page++;
}
}
});
//往左 按钮
$(".button_l").click(function(){
clearInterval(ad_time);
if( !$parent.is(":animated") ){
if( page == 1 ){ //已经到第一个版面了,如果再向前，必须跳转到最后一个版面。
$parent.animate({ left : '-='+none_unit_width*(page_count-1)}, 800); //通过改变left值，跳转到最后一个版面
page = page_count;
}else{
$parent.animate({ left : '+='+none_unit_width }, 800); //通过改变left值，达到每次换一个版面
page--;
}
}
});
//定时器自动滚动
$('.roll_box').hover(function(){
clearInterval(ad_time);
},function(){
ad_time =setInterval(function()
{
if( page == page_count ){
$parent.animate({ left : 0}, 800);
page = 1;549
}else{
$parent.animate({ left : '-='+none_unit_width}, 800);
page++;
}
} , 2000);
}).trigger("mouseleave");
作品实例：http://zuopin.35ui.cn/139html/pc/index.html
原文地址：http://www.35ui.cn/post/20150201608.html 标签：定时器自动切换
上一条： jquery读取jsonp数据代码
下一条： jquery经典自动轮播选项卡代码
或许你还对下面的文章感兴趣
