jquery相册图片来回选择

来源：互联网发布：金融互助金额配对算法编辑：程序博客网时间：2024/04/29 16:37

<!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文件，和使用正确的图片地址

1 0