快捷導(dǎo)航

使用jquery實(shí)現(xiàn)輪播圖效果

更新時(shí)間：2021年01月02日 12:19:11 作者：愛(ài)吃糖果兒噠蓮

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

今天給大家分享的是利用jquery實(shí)現(xiàn)輪播圖的效果，廢話不多說(shuō)咯，直接上代碼，當(dāng)然每行代碼會(huì)有注釋了，這樣也便于理解哦。

第一步：先引進(jìn)jquery文件

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

第二步：html樣式

<div id="banner">
  <!-- 圖片 -->
  <ul id="banner_img">
   <li>
    <img src="./img/1.jpg" alt="">
   </li>
   <li>
    <img src="./img/2.jpg" alt="">
   </li>
   <li>
    <img src="./img/3.jpg" alt="">
   </li>
   <li>
    <img src="./img/4.jpg" alt="">
   </li>
  </ul>
  <!-- 圓點(diǎn) -->
  <ul id="banner_yuandian">
   <li class="active">1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
  </ul>
  <!-- < >箭頭指向 -->
  <button id="banner_back"><</button>
  <button id="banner_next">></button>
 </div>

第三步：css樣式

<style>
  *{
   margin: 0;
   padding: 0;
   list-style: none;
  }
  #banner{
   position: relative;
  }
  /*圖片樣式 */
  #banner #banner_img{
   width: 300px;
   height: 300px;
   border: 2px red solid;
  }
  #banner #banner_img img{
   width: 300px;
   height: 300px;
  }
  #banner #banner_img>li{
   display: none;
  }
  #banner #banner_img :first-child{
   display:block;
  }
  /* 圓點(diǎn)樣式 */
  #banner_yuandian{
   position: absolute;
   bottom: 10px;
   display: flex;
   margin-left: 35px;

  }
  #banner_yuandian li{
   margin-left: 30px;
   width: 20px;
   height: 20px;
   border: 1px red solid;
   border-radius: 50%;
   text-align: center;
  }
  #banner_yuandian li:hover{
   background: orange;
  }
  #banner_yuandian .active{
   background: orange;
  }
  /* 箭頭樣式 */
  #banner_back{
   width: 30px;
   height: 30px;
   position: absolute;
   margin-top: -150px;
  }
  #banner_next{
   width: 30px;
   height: 30px;
   position: absolute;
   margin-top: -150px;
   margin-left: 273px;
  }
</style>

第四步：js樣式

<script>
  
  //設(shè)置圖片，圓點(diǎn)，箭頭共同的下標(biāo) 從0開(kāi)始
  var index=0;

  //封裝輪播的函數(shù) 第一步
  function show(){
   //下標(biāo)每次+1增加
   index+=1;
   //如果下標(biāo)大于等于圖片的長(zhǎng)度數(shù)，返回第一張圖，即是下標(biāo)index=0就行
   if(index>=$("#banner_img>li").length){
    index=0;
   }

   //讓li的每張圖片點(diǎn)擊時(shí)顯示自己，其他兄弟隱藏
   $("#banner_img>li").eq(index).show(1000).siblings().hide(1000);
   //圓點(diǎn)的下標(biāo)也需要封裝一下樣式
   $("#banner_yuandian>li").eq(index).addClass("active").siblings().removeClass("active");
  
  }

  //利用計(jì)時(shí)器達(dá)到輪播效果 第二步
  var x=setInterval(show,2000);

  //鼠標(biāo)移動(dòng)到圖片上時(shí)清除計(jì)時(shí)器，移出之后重新加入計(jì)時(shí)器
  $("#banner_img>li").hover(
   function(){
    clearInterval(x);
   },
   function(){
    x=setInterval(show,2000);
   }
  )


  //圓點(diǎn)設(shè)置，點(diǎn)擊圓點(diǎn)，切換相應(yīng)圖片 第三步
  $("#banner_yuandian>li").on("click",function(){
   //點(diǎn)擊圓點(diǎn)時(shí)的下標(biāo)取共同下標(biāo)
   var index=$(this).index();//出錯(cuò)的地方index()語(yǔ)法

   //點(diǎn)擊下標(biāo)時(shí)展現(xiàn)對(duì)應(yīng)的圖片，其他兄弟圖隱藏
   $("#banner_img>li").eq(index).show(1000).siblings().hide(1000);
   //點(diǎn)擊圓點(diǎn)，添加樣式，其他刪除
   $("#banner_yuandian>li").eq(index).addClass("active").siblings().removeClass("active");
  
  })

  //鼠標(biāo)滑動(dòng)上去滑動(dòng)出來(lái)要清除計(jì)時(shí)器和再次設(shè)置計(jì)時(shí)器 第四步
  $("#banner_yuandian>li").hover(
   function(){
    clearInterval(x);
   },
   function(){
    x=setInterval(show,2000);
   }
  )
   

  //箭頭設(shè)置 第五步
  
  $("#banner_back").on("click",function(){
   //點(diǎn)擊一次減去1
   index--;
   //當(dāng)下標(biāo)小于0時(shí)，就返回第一張圖
   if(index<0){
    index=0;
   }

   
   //點(diǎn)擊下標(biāo)時(shí)展現(xiàn)對(duì)應(yīng)的圖片，其他兄弟圖隱藏 
   $("#banner_img>li").eq(index).show(1000).siblings().hide(1000);
   //點(diǎn)擊圓點(diǎn)，添加樣式，其他刪除
   $("#banner_yuandian>li").eq(index).addClass("active").siblings().removeClass("active");

  })
  //下一張 可以直接調(diào)用
  $("#banner_next").on("click",function(){
   show();
  })

  //點(diǎn)擊button按鈕再次清除計(jì)時(shí)器和添加計(jì)時(shí)器
  $("button").hover(
   function(){
    clearInterval(x);
   },
   function(){
    x=setInterval(show,2000);
 }
)

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

您可能感興趣的文章: