標籤：return val pop oct jquery next 選擇 div put
<!DOCTYPE HTML><html><head><meta charset="UTF-8"><script src='jquery-1.6.1.js'></script></head><style>.border-img{border:8px solid #ccc;}</style><body> <div class='div-img'> <img class='border-img' style='width:100px;height:60px;' src='1.jpg'/> <img style='width:100px;height:60px;' src='2.jpg'/> <img style='width:100px;height:60px;' src='3.jpg'/> <img style='width:100px;height:60px;' src='4.jpg'/> </div> <div id="click"> <input id='prev' type='button' value="prev"/> <input id='next' type='button' value="next"/> </div> <script> //版本號碼一 var imgLength=$(".div-img img").length; var point=0; $("#prev").click(function(){ if(point<=0){ return false;}point--;$(".div-img img").removeClass('border-img');$(".div-img img").eq(point).addClass('border-img'); }); $("#next").click(function(){ if(point>=imgLength-1){ return false;}point++;$(".div-img img").removeClass('border-img');$(".div-img img").eq(point).addClass('border-img'); }); //版本號碼二 迴圈 /* var imgLength=$(".div-img img").length; var point=0; $("#prev").click(function(){ if(point<=0){ point=imgLength-1}else{point--;}$(".div-img img").removeClass('border-img');$(".div-img img").eq(point).addClass('border-img'); }); $("#next").click(function(){ if(point>=imgLength-1){ point=0;}else{ point++;}$(".div-img img").removeClass('border-img');$(".div-img img").eq(point).addClass('border-img'); }); */ </script> </body></html>
寫了兩個版本號碼，一個是來回迴圈的，另外一個不是來回迴圈的，使用前請先引用jquery檔案，和使用正確的圖片地址
jquery相冊圖片來回選擇
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
