JS實現輪播圖效果的3種簡單方法

Posted on by

本文實例為大傢分享瞭3種方法實現JS輪播圖效果的具體代碼，供大傢參考，具體內容如下

Js實現輪播圖01

實現思路

這可能是輪播圖最簡單點的實現之一，通過更改圖片的src來實現該效果，首先需要將圖片命名格式統一比如pic01.jpg，pic02.jpg…,再通過js使用定時器去改變img標簽裡面的src圖片鏈接的名字來實現切換效果。代碼如下：

實現效果

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>輪播圖實現01</title>
  <style type="text/css">
   .lunbo{
    width: 900px;
    height: 400px;
    margin:100px auto;
   }
   .lunbo img{
    width: 100%;
    height:100%;
   }
  </style>
 </head>
 <body>
  <!--輪播圖模塊 -->
  <div class="lunbo">
   <img id="lunbo_img" src="./pic/img3.jpeg" >
  </div>
  <!-- Js代碼 -->
    <script>
      var index = 1;
        function lunbo(){
            index ++ ;
            //判斷index是否大於3
            if(index > 3){
                index = 1;
            }
            //獲取img對象
            var img = document.getElementById("lunbo_img");
            img.src = "./pic/img"+index+".jpeg";
        }
        //2.定義定時器
        setInterval(lunbo,2000);
        /*切記定時器裡調用lunbo方法不能加(),setInterval(lunbo,2000);如果加()會執行lunbo（）方法，而導致定時器沒用。
 </script>
 </body>
</html>

Js實現輪播圖02

實現思路

這可能是輪播圖最簡單點的實現之一，通過改變background的圖片鏈接來實現該效果，首先需要將圖片命名格式統一比如pic01.jpg，pic02.jpg…,再通過js使用定時器去改變background屬性裡面的url（）圖片鏈接的名字來實現切換效果。代碼如下：

實現效果

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>輪播圖實現02</title>
  <style>
   body{
    margin: 0;
    padding: 0;
   }
   .lunbo{
    width:100%;
    height:720px;
    background-image: url(pic/img1.jpeg);/*背景圖片*/
    background-size:100% 100%; 
   }
  </style>
 </head>
 <body>
  <div class="lunbo">
   
  </div>
  <script type="text/javascript">
    var index = 1;
   function lunbo(){
    index ++ ;
    //判斷number是否大於3
    if(index > 3){
     index = 1;
    }
    //獲取img對象
  var img = document.getElementsByClassName("lunbo")[0];
  img.style.background = "url(pic/img"+index+".jpeg)";
  img.style.backgroundSize="100% 100%"; 
   }
   //2.定義定時器
   setInterval(lunbo,3000);
  </script>
 </body>
</html>

Js實現輪播圖03

本輪播圖的實現，首先通過CSS代碼將全部存放圖片的li標簽通過opacity屬性設置為0來隱藏不顯示， 通過js代碼使用定時器不斷調用類active突出顯示li標簽，同時隱藏兄弟li標簽，再通過index++來實現切換循環顯示的效果，當點擊兩邊的按鈕時，調用index++所在的方法實現切換的效果，沒有復雜的算法，一點點基礎一看代碼就會學會，請大傢參考。

實現效果

HTML代碼

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,
  minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <!--引入CSS代碼-->
  <link rel="stylesheet" type="text/css" href="./css/index.css" />
  <!--引入Js代碼-->
  <script src="./js/index.js"></script>
  <title>Js實現輪播圖</title>
 </head>
 <body>
  <div class="lunbo">
   <div class="content">
   <ul id="item">
    <li class="item">
     <a href="#" ><img src="img/pic1.jpg" ></a>
    </li>
    <li class="item">
     <a href="#" ><img src="img/pic2.jpg" ></a>
    </li>
    <li class="item">
     <a href="#" ><img src="img/pic3.jpg" ></a>
    </li>
    <li class="item">
     <a href="#" ><img src="img/pic4.jpg" ></a>
    </li>
    <li class="item">
     <a href="#" ><img src="img/pic5.jpg" ></a>
    </li>
   </ul>
   <div id="btn-left"><</div>
   <div id="btn-right">></div>
   <ul id="circle">
    
    <li class="circle"></li>
    <li class="circle"></li>
    <li class="circle"></li>
    <li class="circle"></li>
    <li class="circle"></li>
   </ul>
   </div>
  </div>
 </body>
</html>

CSS代碼

*{
 margin: 0;
 padding: 0;
}
a{
 list-style: none;
}
li{
 list-style: none;
}
.lunbo{
 width: 100%;
}
.content{
 width: 800px;
 height: 300px;
 margin: 20px auto;
 position: relative;
}
#item{
 width: 100%;
 height: 100%;
 
}
.item{
 position: absolute;
 opacity: 0;
 transition: all 1s;
 
}
.item.active{
 opacity:1;
}
img{
 width: 100%;
}
#btn-left{
 width: 30px;
 height: 69px;
 font-size: 30px;
 color: white;
 background-color:rgba(0,0,0,0.4);
 line-height: 69px;
 padding-left:5px;
 z-index: 10;/*始終顯示在圖片的上層*/
 position: absolute;
 left: 0;
 top: 50%;
 transform: translateY(-60%);/*使按鈕向上偏移居中對齊*/
 cursor: pointer;
 opacity: 0;/*平時隱藏*/
}
.lunbo:hover #btn-left{
 /*鼠標滑入，顯示圖標*/
 opacity: 1;
}

#btn-right{
 width: 26px;
 height: 69px;
 font-size: 30px;
 color: white;
 background-color:rgba(0,0,0,0.4);
 line-height: 69px;
 padding-left: 5px;
 z-index: 10;
 position: absolute;
 right: 0;
 top: 50%;
 cursor: pointer;
 opacity: 0;
 transform: translateY(-60%);
}
.lunbo:hover #btn-right{
 opacity: 1;
}
#circle{
 height: 20px;
 display: flex;
 position: absolute;
 bottom: 35px;
 right: 25px;
}
.circle{
 width: 10px;
 height: 10px;
 border-radius: 10px;
 border: 2px solid white;
 background: rgba(0,0,0,0.4);
 cursor: pointer;
 margin: 5px;
}
.white{
 background-color: #FFFFFF;
}

JS代碼

window.onload=function(){
var items=document.getElementsByClassName("item");
var circles=document.getElementsByClassName("circle");
var leftBtn=document.getElementById("btn-left");
var rightBtn=document.getElementById("btn-right");
var content=document.querySelector('.content');
var index=0;
var timer=null;

//清除class
var clearclass=function(){
 for(let i=0;i<items.length;i++){
  items[i].className="item";
  circles[i].className="circle";
  circles[i].setAttribute("num",i);
 }
}
/*隻顯示一個class*/
function move(){
 clearclass();
 items[index].className="item active";
 circles[index].className="circle white";
}
//點擊右邊按鈕切換下一張圖片
rightBtn.onclick=function(){
 if(index<items.length-1){
  index++;
 }
 else{
  index=0;
 }
 move();
}
//點擊左邊按鈕切換上一張圖片
leftBtn.onclick=function(){
 if(index<items.length){
  index--;
 }
 else{
  index=items.length-1;
 }
 move();
}
//開始定時器，點擊右邊按鈕，實現輪播
timer=setInterval(function(){
 rightBtn.onclick();
},1500)
//點擊圓點時，跳轉到對應圖片
for(var i=0;i<circles.length;i++){
 circles[i].addEventListener("click",function(){
  var point_index=this.getAttribute("num");
  index=point_index;
  move();
 })

}
//鼠標移入清除定時器，並開啟一個三秒的定時器，使慢慢轉動
content.onmouseover=function(){
 clearInterval(timer);
  timer=setInterval(function(){
   rightBtn.onclick();
  },3000)
}
//鼠標移出又開啟定時器
content.onmouseleave=function(){
 clearInterval(timer);
 timer=setInterval(function(){
  rightBtn.onclick();
 },1500)
}
}

代碼可能寫的不是很好，存在很多不足，歡迎大傢指點批評，我會努力去改正，有疑問歡迎留言，我會盡力去解答，謝謝大傢花寶貴的時間來閱讀這篇文章。

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

推薦閱讀：