点击滚动模式下,是为点击(向前/向后/数字)添加
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);
}