基于jQuery的图片左右轮播，基本原理通用

来源：互联网发布：林氏木业还是全友知乎编辑：程序博客网时间：2024/05/21 19:28
转载地址：http://www.cnblogs.com/qj0813/p/5072314.html
我的思路很简单就是通过判断index值的大小变化来判断图片左移还是右移。通过控制图片的left值，来达到一个轮播的效果。
  1 <!DOCTYPE html>  2 <html>  3     <head>  4         <meta charset="utf-8">  5         <title></title>  6     </head>  7     <script src="js/jquery.min.js"></script>  8     <style>  9         .banner{ 10             margin:0 auto; 11             border: 4px dashed black; 12             width:400px; 13             height:200px; 14             position: relative; 15             overflow:hidden; 16         } 17         .banner a{ 18             z-index: 100; 19             display: block; 20             width:100%; 21             height: 100%; 22             position: absolute; 23             left:100%; 24             top:0; 25         } 26         .banner .first{ 27             left:0; 28         } 29         .banner a img{ 30             width:100%; 31             height: 100%; 32         } 33         .choose{ 34             z-index: 1000; 35             position: absolute; 36             left:150px; 37             top:180px; 38             width:100px; 39             height: 10px; 40         } 41         .choose span{ 42             margin-right: 15px; 43             float: left; 44             display:block; 45             background: blue; 46             width:10px; 47             height: 10px; 48             border-radius: 10px; 49         } 50         .choose span:hover{ 51             background: red; 52         } 53         .choose .red{ 54             background: red; 55         } 56         .banner .pre,.next{ 57             cursor:pointer; 58             text-align:center; 59             border-radius:20px; 60             display:block; 61             background:#cccccc; 62             opacity:0.4; 63             text-decoration: none; 64             z-index: 200; 65             display:block; 66             width:40px; 67             height: 40px; 68             font-size: 40px; 69             color:red; 70             position: absolute; 71             top:80px; 72         } 73         .banner .pre{ 74             left:0px 75         } 76         .banner .next{ 77             right: 0px; 78         } 79     </style> 80     <body> 81          82         <div class="banner"> 83             <!-- 84                 这里为上一页下一页点击按钮 85             --> 86             <span class="pre">-</span> 87             <span class="next">+</span> 88             <!-- 89                 此处为轮播主体，颜色块代替。图片自加 90             --> 91             <a href="###" class="first" style="background: pink;"></a> 92             <a href="###" style="background: blue;"><img src="images/banner1.jpg"/></a> 93             <a href="###" style="background: greenyellow;"><img src="images/banner2.jpg"/></a> 94             <a href="###" style="background: deepskyblue;"><img src="images/banner3.jpg"/></a> 95             <!-- 96                 此处为轮播部分下方小点选择 97             --> 98             <div class="choose"> 99                 <span class="red"></span>100                 <span></span>101                 <span></span>102                 <span></span>103             </div>104         </div>105         106         <script>107             /*定义两个变量，保存当前页码和上一页页码*/108             var $index=0;109             var $exdex=0;110             /*小点的鼠标移入事件，触发图片左移还是右移*/111             $(".choose span").mouseover(function(){112                 //获取当前移入的index值113                 $index=$(this).index();        114                 //首先让点的颜色变化，表示选中115                 $(".choose span").eq($index).addClass("red").siblings().116                         removeClass("red");117                 //判断如果index变小，证明图片要往左移动。变大则为右移118                 if($index>$exdex){119                     next();120                 }else if($index<$exdex){121                     pre();122                 }123                 //移动完毕将当前index值替换了前页index124                 return $exdex=$index;125             });126             //下一页的点击事件。在右移基础上加了最大index判断127             $(".next").click(function(){128                 $index++;129                 if($index>3){130                     $index=0131                 }132                 $(".choose span").eq($index).addClass("red").siblings().133                         removeClass("red");134                 next();135                 return $exdex=$index;136             });137             //上一页的点击事件138             $(".pre").click(function(){139                 $index--;140                 if($index<0){141                     $index=3142                 };143                 $(".choose span").eq($index).addClass("red").siblings().144                     removeClass("red");145                 pre();146                 return $exdex=$index;147             });148             //加个定时器，正常轮播149             var atime=setInterval(function(){150                 $(".next").click();            151             },1000);152             //这里为右移和左移的事件函数。153             //右移基本原理就是先让exdex定位的left左移百分百，而选中的当前页从屏幕右边移入,left变为0154             function next(){155                 $(".banner a").eq($index).stop(true,true).156                         css("left","100%").animate({"left":"0"});157                 $(".banner a").eq($exdex).stop(true,true).158                         css("left","0").animate({"left":"-100%"});159             }160             function pre(){161                 $(".banner a").eq($index).stop(true,true).162                     css("left","-100%").animate({"left":"0"});163                 $(".banner a").eq($exdex).stop(true,true).164                     css("left","0").animate({"left":"100%"});165             }166         </script>167     </body>168 </html>
希望大家指出问题，交流思路，让我们彼此思路能够更宽广。
致谢
阅读全文
0 0