Jquery implements automatic left and right scrolling example of images_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>