jQuery實現簡單輪播圖效果

Posted on by

本文實例為大傢分享瞭jQuery實現簡單輪播圖效果的具體代碼，供大傢參考，具體內容如下

介紹：這裡是我使用瞭計時器的方式實現圖片每隔幾秒切換然後添加瞭兩個按鈕用於上一張和下一張的切換

1、導入jQuery文件 

<script src="jquery-3.5.1.js"></script>

2、設置圖片的樣式 

<style>
  *{
   margin: 0;
   padding: 0;
  }
  #box{
   width: 300px;
   height: 300px;
   border: 2px solid red;
  }
  #box img{
   position: absolute;
   display: none;
  }
  #box :first-child{
   display: block;
  }
  .page{
   list-style: none;
   display: flex;
   width: 300px;
   justify-content: space-around;
  }
  .page li{
   border: 1px solid red;
   border-radius: 50%;
   width: 20px;
   height: 20px;
   text-align: center;

  }
  .active{
   background: red;
  }
 </style>
 <script src="./jquery.js"></script>
</head>
<body>
 <div id="box">
  <img src="./img/1.jpg" alt="">
  <img src="./img/2.jpg" alt="">
  <img src="./img/3.jpg" alt="">
  <img src="./img/4.jpg" alt="">
 </div> 
 <ul class="page" id="page" >
  <li class="active">1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
 </ul>
<button id="next">下一張</button>
<button id="prev">上一張</button>

3 進行圖片的輪播實現方式 

/*
 絕對定位 -- 摞起來
 通過下標 -- 顯示當前 --其他兄弟 隱藏
*/
  <script>
   var index=0;
    // 移動方法
   function move(){
    index++;
    if (index>=$("#box img").length) {
     index=0;
    }
    $("#box img").eq(index).show().siblings().hide();
    $("#page li").eq(index).addClass("active").siblings().removeClass("active");
   }
   //計時器的實現方法
   var t=setInterval(move,2000);
   //鼠標移動到圖片會停止離開繼續輪播
   $("#box").hover(function(){
    clearInterval(t)
   },function(){
    t=setInterval(move,2000)
   })

   $("#page li").click(function(){
    index= $(this).index() ;
    $("#box img").eq(index).show().siblings().hide();
    $("#page li").eq(index).addClass("active").siblings().removeClass("active");
   })
   //下一張的點擊
   $("#next").click(function(){
    move();
   })
   //上一張的點擊
   $("#prev").click(function(){
    index--;
    // 判斷如果下標超過固有圖片的數量時，從頭開始輪播
    if (index<0) {
     index=$("#box img").length-1;
    }
    $("#box img").eq(index).show().siblings().hide();
    $("#page li").eq(index).addClass("active").siblings().removeClass("active");
   })

</script>

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：