畢竟新人，寫點基礎的小東西，希望能和大家溝通交流，提高自己的水平。
這個是應用較多的輪播部分，希望能和大家分享一下思路，拓寬視野。
話不多說，上內容。
我的思路很簡單就是通過判斷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值替換了前頁index 124 return $exdex=$index; 125 }); 126 //下一頁的點擊事件。在右移基礎上加了最大index判斷 127 $(".next").click(function(){ 128 $index++; 129 if($index>3){ 130 $index=0 131 } 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=3 142 }; 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變為0 154 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>
希望大家指出問題，交流思路，讓我們彼此思路能夠更寬廣。
致謝