快捷導(dǎo)航

jQuery實現(xiàn)簡單輪播圖效果

更新時間：2020年12月27日 10:45:43 作者：阡禧

這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)簡單輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了jQuery實現(xiàn)簡單輪播圖效果的具體代碼，供大家參考，具體內(nèi)容如下

介紹：這里是我使用了計時器的方式實現(xiàn)圖片每隔幾秒切換然后添加了兩個按鈕用于上一張和下一張的切換

1、導(dǎo)入jQuery文件

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

2、設(shè)置圖片的樣式

<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 進(jìn)行圖片的輪播實現(xiàn)方式

/*
 絕對定位 -- 摞起來
 通過下標(biāo) -- 顯示當(dāng)前 --其他兄弟 隱藏
*/
  <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");
   }
   //計時器的實現(xiàn)方法
   var t=setInterval(move,2000);
   //鼠標(biāo)移動到圖片會停止離開繼續(xù)輪播
   $("#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--;
    // 判斷如果下標(biāo)超過固有圖片的數(shù)量時，從頭開始輪播
    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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: