你的位置:首页 > Java教程

[Java教程]基于jQuery的图片左右轮播,基本原理通用


毕竟新人,写点基础的小东西,希望能和大家沟通交流,提高自己的水平。

这个是应用较多的轮播部分,希望能和大家分享一下思路,拓宽视野。

话不多说,上内容。

我的思路很简单就是通过判断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>

希望大家指出问题,交流思路,让我们彼此思路能够更宽广。

致谢