jquery 實現 輪播圖
阿新 • • 發佈:2018-12-16
<!doctype html> <html> <head> <meta charset="utf-8"> <title>輪播圖</title> <script src="js/jquery-1.12.3.js"></script> <script> $(function(){ $(".rs").on("click",function(){ //右箭頭點選事件 $(".imgs").css({ marginLeft: function(index, value) { //此函式返回要設定的屬性值。接受兩個引數,index為元素在物件集合中的索引位置,value是原先的屬性值。 var move = parseInt(value) - 290; //每點選一次移動一個圖片的畫素 if(move == -1160){ //當圖片移動超過界限後,返回第一張圖片 return 0 + "px"; } return move + "px"; } }); $(".imgs").stop().fadeOut(5).fadeIn(500); //stop 停止之前的所有動畫 fadeOut 淡出 fadeIn 淡入 }); $(".ls").on("click",function(){ //左邊 $(".imgs").css({ marginLeft: function(index, value) { var move = parseInt(value) + 290; if(move == 290){ return -870 + "px"; } return move + "px"; } }); $(".imgs").stop().fadeOut(5).fadeIn(500); }); }); </script> <style> *{ margin: 0; padding: 0; } div{ width: 290px; margin: 200px auto; overflow: hidden; position: relative; } ul{ width: 1800px; height: 430px; margin-left: 0; } ul>li{ list-style: none; float: left; } span{ display: block; width: 40px; font-size: 50px; background-color: rgba(0,0,0,0.3); color: white; text-align: center; line-height: 80px; } div .leftArrow{ position: absolute; top: 50%; left: 0; margin-top: -40px; } div .rightArrow{ position: absolute; top: 50%; right: 0; margin-top: -40px; } div>a{ display: none; } div:hover a{ display: inline-block; } </style> </head> <body> <div> <ul class="imgs"> <!-- 圖片大小為 290 * 430 --> <li><img src="img/item1.jpg" /></li> <li><img src="img/item2.jpg" /></li> <li><img src="img/item3.jpg" /></li> <li><img src="img/item4.jpg" /></li> </ul> <a href="javascript:void(0)" class="ls"><span class="leftArrow"><</span></a> <a href="javascript:void(0)" class="rs"><span class="rightArrow">></span></a> </div> </body> </html>