Jquery实现图片左右自动滚动示例_jquery

复制代码 代码如下:

<script> <BR>$(function(){ <BR>//@Mr.Think***变量 <BR>var $cur = 1;//初始化显示的版面 <BR>var $i = 5;//每版显示数 <BR>var $len = $('.showbox>ul>li').length;//计算列表总长度(个数) <BR>var $pages = Math.ceil($len / $i);//计算展示版面数量 <BR>var $w = $('.ibox').width();//取得展示区外围宽度 <BR>var $showbox = $('.showbox'); <BR>var $num = $('span.num li') <BR>var $pre = $('span.pre') <BR>var $next = $('span.next'); <BR>var $autoFun; <BR>//@Mr.Think***调用自动滚动 <BR>autoSlide(); <BR>//@Mr.Think***向前滚动 <BR>$pre.click(function(){ <BR>if (!$showbox.is(':animated')) { //判断展示区是否动画 <BR>if ($cur == 1) { //在第一个版面时,再向前滚动到最后一个版面 <BR>$showbox.animate({ <BR>left: '-=' + $w * ($pages - 1) <BR>}, 500); //改变left值,切换显示版面,500(ms)为滚动时间,下同 <BR>$cur = $pages; //初始化版面为最后一个版面 <BR>} <BR>else { <BR>$showbox.animate({ <BR>left: '+=' + $w <BR>}, 500); //改变left值,切换显示版面 <BR>$cur--; //版面累减 <BR>} <BR>$num.eq($cur - 1).addClass('numcur').siblings().removeClass('numcur'); //为对应的版面数字加上高亮样式,并移除同级元素的高亮样式 <BR>} <BR>}); <BR>//@Mr.Think***向后滚动 <BR>$next.click(function(){ <BR>if (!$showbox.is(':animated')) { //判断展示区是否动画 <BR>if ($cur == $pages) { //在最后一个版面时,再向后滚动到第一个版面 <BR>$showbox.animate({ <BR>left: 0 <BR>}, 500); //改变left值,切换显示版面,500(ms)为滚动时间,下同 <BR>$cur = 1; //初始化版面为第一个版面 <BR>} <BR>else { <BR>$showbox.animate({ <BR>left: '-=' + $w <BR>}, 500);//改变left值,切换显示版面 <BR>$cur++; //版面数累加 <BR>} <BR>$num.eq($cur - 1).addClass('numcur').siblings().removeClass('numcur'); //为对应的版面数字加上高亮样式,并移除同级元素的高亮样式 <BR>} <BR>}); <BR>//@Mr.Think***数字点击事件 <BR>$num.click(function(){ <BR>if (!$showbox.is(':animated')) { //判断展示区是否动画 <BR>var $index = $num.index(this); //索引出当前点击在列表中的位置值 <BR>$showbox.animate({ <BR>left: '-' + ($w * $index) <BR>}, 500); //改变left值,切换显示版面,500(ms)为滚动时间 <BR>$cur = $index + 1; //初始化版面值,这一句可避免当滚动到第三版时,点击向后按钮,出面空白版.index()取值是从0开始的,故加1 <BR>$(this).addClass('numcur').siblings().removeClass('numcur'); //为当前点击加上高亮样式,并移除同级元素的高亮样式 <BR>} <BR>}); <BR>//@Mr.Think***停止滚动 <BR>clearFun($showbox); <BR>clearFun($pre); <BR>clearFun($next); <BR>clearFun($num); <BR>//@Mr.Think***事件划入时停止自动滚动 <BR>function clearFun(elem){ <BR>elem.hover(function(){ <BR>clearAuto(); <BR>}, function(){ <BR>autoSlide(); <BR>}); <BR>} <BR>//@Mr.Think***自动滚动 <BR>function autoSlide(){ <BR>$next.trigger('click'); <BR>$autoFun = setTimeout(autoSlide, 4000);//此处不可使用setInterval,setInterval是重复执行传入函数,这会引起第二次划入时停止失效 <BR>} <BR>//@Mr.Think***清除自动滚动 <BR>function clearAuto(){ <BR>clearTimeout($autoFun); <BR>} <BR>}); <BR></script>

• 


• 


• 


• 


• 


• 


• 


• 


• 


• 


• 


• 


• 

«向左滚动
向右滚动»