Home  >  Article  >  Web Front-end  >  Jquery implements automatic left and right scrolling example of images_jquery

Jquery implements automatic left and right scrolling example of images_jquery

WBOY
WBOYOriginal
2016-05-16 17:21:201127browse
Copy code The code is as follows:




基于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>






  • demo

  • demo

  • demo

  • demo

  • demo

  • demo

  • demo

  • demo

  • demo

  • demo

  • demo

  • demo

  • demo



«向左滚动
向右滚动»




Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn