基于jQuery的控制左右滚动及自动滚动效果

点击滚动模式下,是为点击(向前/向后/数字)添加 click事件,通过控制展示区块 left值实现切换.
1.向前(左):当在第一个版面时,滚动到最后一个页面,否则,累加 left值,向前滚动;
2.向后(右):当在最后一个版面时,滚动到第一个页面,否则,累减 left值,向后滚动;
3.数字点击:利用 index(…)获取当前点击在数字列表中的索引值, 然后索引值为倍数为外围宽度负值.即可达到切换.
核心代码:

//***向前滚动

$pre.click(function(){

if(!$showbox.is(':animated')) { //判断展示区是否动画

if($cur == 1) {   //在第一个版面时,再向前滚动到最后一个版面

$showbox.animate({

left:'-=' + $w * ($pages - 1)

}, 500);//改变left值,切换显示版面,500(ms)为滚动时间,下同

$cur = $pages;//初始化版面为最后一个版面

}

else{

$showbox.animate({

left:'+=' + $w

}, 500);//改变left值,切换显示版面

$cur--;//版面累减

}

$num.eq($cur - 1).addClass('numcur').siblings().removeClass('numcur');//为对应的版面数字加上高亮样式,并移除同级元素的高亮样式

}

});

//***向后滚动

$next.click(function(){

if(!$showbox.is(':animated')) {//判断展示区是否动画

if($cur == $pages) {  //在最后一个版面时,再向后滚动到第一个版面

$showbox.animate({

left: 0

}, 500);//改变left值,切换显示版面,500(ms)为滚动时间,下同

$cur = 1;//初始化版面为第一个版面

}

else{

$showbox.animate({

left:'-=' + $w

}, 500);//改变left值,切换显示版面

$cur++;//版面数累加

}

$num.eq($cur - 1).addClass('numcur').siblings().removeClass('numcur');//为对应的版面数字加上高亮样式,并移除同级元素的高亮样式

}

});

//***数字点击事件

$num.click(function(){

if(!$showbox.is(':animated')) {//判断展示区是否动画

var$index = $num.index(this);//索引出当前点击在列表中的位置值

$showbox.animate({

left:'-' + ($w * $index)

}, 500);//改变left值,切换显示版面,500(ms)为滚动时间

$cur = $index + 1;//初始化版面值,这一句可避免当滚动到第三版时,点击向后按钮,出面空白版.index()取值是从0开始的,故加1

$(this).addClass('numcur').siblings().removeClass('numcur');//为当前点击加上高亮样式,并移除同级元素的高亮样式

}

});

自动滚动模式是基于点击滚动模式加强的,无非是添加了自动滚动事件,以及当鼠标划上时清除动画事件.
这里要说明一点.DEMO演示中,为向前/向后/数字/区域都添加了当鼠标划过时都添加了清除动画事件.但是,如果你的页面中,这几个需要添加清除动画事件的都在同一个区域内,完全可以用trigger(…)模拟实现自动滚动.
还有一点,自动滚动中是用setTimeout(“fun”,interval)实现,而不用setInterval(“fun”,interval)实现. 原因在于,setInterval是在间隔时间后重复执行传入的函数,而setTimeout只在间隔时间后执行一次函数传入函数,这样即可避免第二次鼠标划入停止动画区域时不能清除动画.
核心代码:

......

//***调用自动滚动

autoSlide();

......

//***停止滚动

clearFun($showbox);

clearFun($pre);

clearFun($next);

clearFun($num);

//***事件划入时停止自动滚动

functionclearFun(elem){

elem.hover(function(){

clearAuto();

}, function(){

autoSlide();

});

}

//***自动滚动

functionautoSlide(){

$next.trigger('click');

$autoFun = setTimeout(autoSlide, 3000);//此处不可使用setInterval,setInterval是重复执行传入函数,这会引起第二次划入时停止失效

}

//***清除自动滚动

functionclearAuto(){

clearTimeout($autoFun);

}

转载例子：http://mrthink.net/demo/thinkjq100723a.htm