分页

最新推荐文章于 2024-07-18 10:45:00 发布

struggling888

最新推荐文章于 2024-07-18 10:45:00 发布

阅读量135

点赞数

分类专栏：学习笔记文章标签：图片加载

本文链接：https://blog.csdn.net/struggling888/article/details/72636531

版权

学习笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<style>
  #box{width:1200px;margin:0 auto;}
  p{text-align:center;}
  p .next{margin-left: 20px}
</style>
<body>
  <div id="box" align="center">
    <img src="img/1.jpg" id="img">
    <p>
      <a class="prev btn">上一页</a>
      <a class="next btn">下一页</a>
    </p>    
  </div>
  <script src="js/jquery-1.7.2.min.js"></script>
  <script>
    var imgs=[1,2,3,4];
    var length=imgs.length;
    var index=0;
   $(".btn").on("click",function(){
  if($(this).attr("class")=="prev btn"){//上一张
    if(index>0){
      index--;
       $("#img").attr("src","img/"+imgs[index]+".jpg")
    }else if(index<=0){
      $("#img").attr("src","img/"+imgs[3]+".jpg");
      index=3;
    }
  }else{//下一张        
    if(index<3){
      index++;
      $("#img").attr("src","img/"+imgs[index]+".jpg");
    }else if(index>=3){
      $("#img").attr("src","img/"+imgs[0]+".jpg");
      index=0;
    }

  }
})   
  </script>  
</body>