jquery實現點擊左右按鈕切換圖片
本文實例為大傢分享瞭jquery點擊左右按鈕切換圖片的具體代碼,供大傢參考,具體內容如下
當點擊瞭右邊的按鈕後,圖片向左移動,同理左邊按鈕。
css樣式此處省略……直接進入到js代碼中
<div class="down-down-div"> <div class="pics-frame"> <div class="frame-first"> <!--第一個div --> <div id="left_btn" class="pic-button-left"> <!--“ < ”按鈕--> <div style="padding-top: 70px;"> < </div> </div> </div> <!--第二個div --> <div class="frame-second"> <div class="frame-second-up"> <div style="float: left;font-size: 10px;"> 本車型適用的精品配件: </div> </div> <div class="frame-second-down"> <div class="frame-second-down-down"> <!--圖片集--> <div class="frame-second-down-uppics"> <img id="img0" style="width: 100%;height: 100%;" src="./images/accessories/t500.png" /> </div> <!--文字--> <div class="frame-second-down-downtext"> 擋泥板 </div> </div> <div class="frame-second-down-down"> <!--圖片集--> <div class="frame-second-down-uppics"> <img id="img1" style="width: 100%;height: 100%;" src="./images/accessories/t501.png" /> </div> <!--文字--> <div class="frame-second-down-downtext"> 車窗側雨刷 </div> </div> <div class="frame-second-down-down"> <!--圖片集--> <div class="frame-second-down-uppics"> <img id="img2" style="width: 100%;height: 100%;" src="./images/accessories/t502.png" /> </div> <!--文字--> <div class="frame-second-down-downtext"> 車牌窗飾框 </div> </div> <div class="frame-second-down-down"> <!--圖片集--> <div class="frame-second-down-uppics"> <img id="img3" style="width: 100%;height: 100%;" src="./images/accessories/t600.png" /> </div> <!--文字--> <div class="frame-second-down-downtext"> 地毯(七座) </div> </div> </div> </div> <!--第三個div --> <div id="right_btn" class="frame-third"> <!--“ > ”按鈕--> <div class="pic-button-right"> <div style="padding-top: 70px;"> > </div> </div> </div> </div> </div> <!--隱藏狀態的圖片集--> <div id="imgs"> <img src="images/accessories/t500.png" style="display: none;" /> <img src="images/accessories/t501.png" style="display: none;" /> <img src="images/accessories/t502.png" style="display: none;" /> <img src="images/accessories/t600.png" style="display: none;" /> <img src="images/accessories/t602.png" style="display: none;" /> <img src="images/accessories/t603.png" style="display: none;" /> <img src="images/accessories/t604.png" style="display: none;" /> <img src="images/accessories/t605.png" style="display: none;" /> <img src="images/accessories/t606.png" style="display: none;" /> <img src="images/accessories/t607.png" style="display: none;" /> <img src="images/accessories/t608.png" style="display: none;" /> </div> $(function() { var images = []; var imgs = $("#imgs img"); var index = 0; //展示的圖片,長度為4 var displayLength = $(".frame-second-down img").length; for(var i = 0; i < imgs.length; i++) { images.push(imgs[i]); } //相冊左邊按鈕 $("#left_btn").click(function() { if(index == 0) { alert("已經是第一張照片啦!"); return; } else { for(var j = 0; j < displayLength; j++) { $("#img" + j).attr("src", images[index - 1 + j].src); } index--; } }) //相冊右邊按鈕 $("#right_btn").click(function() { if(index == (imgs.length - displayLength)) { alert("已經是最後一張圖片瞭!"); return 0; } else { for(var j = 0; j < displayLength; j++) { $("#img" + j).attr("src", images[j + 1 + index].src); } index++; } }) })
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- Python簡單實現gif動圖倒放示例
- Python中Tkinter組件Frame的具體使用
- JavaScript Canvas實現兼容IE的兔子發射爆破動圖特效
- jQuery呼吸輪播圖制作原理詳解
- 十行Python代碼制作一個視頻倒放神器