menu
more_vert

jquery相冊图片来回选择

作者:dayu

<!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相冊图片来回选择

原文地址:http://www.cnblogs.com/brucemengbm/p/7249664.html