基于jQuery的控制左右滚动效果_自动滚动
2013-05-29 09:50
645 查看
<!DOCTYPE HTML> <html> <head> <title>基于jQuery的控制左右滚动效果_自动滚动版本</title> <script src="http://jt.875.cn/js/jquery.js"></script> <style> body{font-size:0.8em;letter-spacing:1px;font-family:"微软雅黑"; line-height:1.8em} div,ul,li,ol,img{margin:0;padding:0} h1{font-size:1em; font-weight:normal;} h1 a{background:#CFF; padding:2px 3px; text-decoration:none;} h1 a:hover{background:#eee; text-decoration:underline} h2,h3{font-size:1em; font-weight:normal; color:#a40000; margin:1em auto; position:relative} h3{color:#888; font-weight:bold} ul,li,ol{list-style:none} .ibox{width:850px; height:210px; background:#ddd; margin:1em auto; border:1em solid #ddd; position:relative; overflow:hidden} .showbox{position:absolute;left:0;width:2550px; height:170px; background:#fff} .showbox ul li{float:left;margin:7px} .showbox ul li img{width:150px; height:150px; border:3px solid #a40000} .ibox span{position:absolute;padding:2px 5px; background:#fff; cursor:pointer;} .ibox span.pre{left:10px; bottom:0} .ibox span.next{right:10px; bottom:0} .ibox span.num{right:45%; bottom:0; background:#ddd;line-height:18px;} .ibox span.num li{display:inline;margin:0 5px; padding:1px 5px; line-height:18px} .ibox span.num .numcur{background:#a40000; color:#fff} </style> <script> $(function(){ //变量 var $cur = 1;//初始化显示的版面 var $i = 5;//每版显示数 var $len = $('.showbox>ul>li').length;//计算列表总长度(个数) var $pages = Math.ceil($len / $i);//计算展示版面数量 var $w = $('.ibox').width();//取得展示区外围宽度 var $showbox = $('.showbox'); var $num = $('span.num li') var $pre = $('span.pre') var $next = $('span.next'); var $autoFun; //调用自动滚动 autoSlide(); //向前滚动 $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 }, 1000); //改变left值,切换显示版面,500(ms)为滚动时间,下同 $cur = 1; //初始化版面为第一个版面 } else { $showbox.animate({ left: '-=' + $w }, 1000);//改变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) }, 1000); //改变left值,切换显示版面,500(ms)为滚动时间 $cur = $index + 1; //初始化版面值,这一句可避免当滚动到第三版时,点击向后按钮,出面空白版.index()取值是从0开始的,故加1 $(this).addClass('numcur').siblings().removeClass('numcur'); //为当前点击加上高亮样式,并移除同级元素的高亮样式 } }); //停止滚动 clearFun($showbox); clearFun($pre); clearFun($next); clearFun($num); //事件划入时停止自动滚动 function clearFun(elem){ elem.hover(function(){ clearAuto(); }, function(){ autoSlide(); }); } //自动滚动 function autoSlide(){ $next.trigger('click'); $autoFun = setTimeout(autoSlide, 3000);//此处不可使用setInterval,setInterval是重复执行传入函数,这会引起第二次划入时停止失效 } //清除自动滚动 function clearAuto(){ clearTimeout($autoFun); } }); </script> </head> <body> <div class="ibox"> <div class="showbox"> <ul> <li><img src="http://pic.875.cn/upload/2013-03-25/1620576851.jpg" alt="生意街" title="生意街" /></li> <li><img src="http://pic.875.cn/upload/2013-01-24/1634016671.jpg" alt="生意街" title="生意街" /></li> <li><img src="http://pic.875.cn/upload/2013-03-07/1506174974.jpg" alt="生意街" title="生意街" /></li> <li><img src="http://pic.875.cn/upload/2013-04-17/1020322071.jpg" alt="生意街" title="生意街" /></li> <li><img src="http://pic.875.cn/upload/2013-04-17/1020322071.jpg" alt="生意街" title="生意街" /></li> <li><img src="http://pic.875.cn/upload/2013-03-25/1620576851.jpg" alt="生意街" title="生意街" /></li> <li><img src="http://pic.875.cn/upload/2013-01-24/1634016671.jpg" alt="生意街" title="生意街" /></li> <li><img src="http://pic.875.cn/upload/2013-03-07/1506174974.jpg" alt="生意街" title="生意街" /></li> <li><img src="http://pic.875.cn/upload/2013-04-17/1020322071.jpg" alt="生意街" title="生意街" /></li> <li><img src="http://pic.875.cn/upload/2013-04-17/1020322071.jpg" alt="生意街" title="生意街" /></li> <li><img src="http://pic.875.cn/upload/2013-03-25/1620576851.jpg" alt="生意街" title="生意街" /></li> <li><img src="http://pic.875.cn/upload/2013-01-24/1634016671.jpg" alt="生意街" title="生意街" /></li> <li><img src="http://pic.875.cn/upload/2013-03-07/1506174974.jpg" alt="生意街" title="生意街" /></li> <li><img src="http://pic.875.cn/upload/2013-04-17/1020322071.jpg" alt="生意街" title="生意街" /></li> <li><img src="http://pic.875.cn/upload/2013-04-17/1020322071.jpg" alt="生意街" title="生意街" /></li> </ul> </div> <span class="pre">«向左滚动</span> <span class="next">向右滚动»</span> <span class="num"> <ol> <li class="numcur">1</li> <li>2</li> <li>3</li> </ol> </span> </div> </body> </html>
相关文章推荐
- 基于jQuery的控制左右滚动及自动滚动效果
- 基于jQuery的控制左右滚动及自动滚动效果
- 基于jQuery的可以控制左右滚动及自动滚动效果的代码
- 基于jQuery的控制左右滚动及自动滚动效果
- 基于jquery的循环左右滚动和上下滚动效果
- 基于jQuery的图片展示(横向滚动,可左右控制)
- jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
- jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
- 基于jquery的循环左右滚动和上下滚动效果(备用记录)
- 基于jQuery的图片展示(横向滚动,可左右控制)
- jQuery实现自动左右滚动效果的代码实例
- jquery实现图片左右间隔滚动特效(可自动播放)
- jQuery左右滚动效果(带停顿)
- cocos2dx - lua 自定义控件及动画控制(2) ---- 基于Action实现循环滚动效果
- jquery实现图片左右滚动效果
- 基于JQuery实现滚动到页面底端时自动加载更多信息
- 基于jquery的代码显示区域自动拉长效果
- jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果