首页 > js外包代码 > 左右带箭头自动切换代码

左右带箭头自动切换代码

发布-网页培训班 | 浏览量-

 //轮播图自动切换代码

 
    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"); 
 
setTimeout()与clearTimeout() setInterval 用法
 
作品实例:http://zuopin.35ui.cn/139html/pc/index.html
 
对联代码实例

 

原文地址:http://www.35ui.cn/post/20150201608.html

标签定时器自动切换

上一条: jquery读取jsonp数据代码
下一条: jquery经典自动轮播选项卡代码

或许你还对下面的文章感兴趣