使用JavaScript實現(xiàn)輪播圖特效

更新時間：2021年09月02日 13:13:46 作者：風筱默染

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

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
   .aaa {
    width: 600px;
    height: 350px;
    position: relative;/*相對定位*/
    margin: 50px auto;/*離頂部50px，并且居中*/
   }
   .picture img {
    position: absolute;/*絕對定位*/
   }
   .dot {
    position: absolute;
    bottom: 5px;
   }
   .dot li {
    float: left;
    width: 16px;
    height: 16px;
    background-color: #e8e8e8;
    border-radius: 50%;
    list-style: none;/*清除列表樣式*/
    margin-right: 10px;
    cursor: pointer;/*光標呈現(xiàn)為指示鏈接的指針（一只手）*/
   }
   .left {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 169px;
    text-align: center;
    background-color: #000000;
    line-height: 30px;
    color: #FFFFFF;
    cursor: pointer;/*光標呈現(xiàn)為指示鏈接的指針（一只手）*/
   }
   .right {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 169px;
    right: 0;
    text-align: center;
    background-color: #000000;
    line-height: 30px;
    color: #FFFFFF;
    cursor: pointer;/*光標呈現(xiàn)為指示鏈接的指針（一只手）*/
   }
   .aaa .spot {
    background-color: #FF0000;
   }
  </style>
 </head>
 <body>
  <div class="aaa">
   <div class="picture">
    <img src="images/1.jpg" style="width: 600px;height: 350px;">
    <img src="images/2.jpg" style="width: 600px;height: 350px;">
    <img src="images/3.jpg" style="width: 600px;height: 350px;">
    <img src="images/4.jpg" style="width: 600px;height: 350px;">
    <img src="images/5.jpg" style="width: 600px;height: 350px;">
   </div>
   <ul class="dot">
    <li class="spot"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ul>
   <div class="left">&lt;</div><!--&lt;  轉義字符 -->
   <div class="right">&gt;</div><!--&gt;  轉義字符 -->
  </div>
  <script>
   var lis = document.querySelectorAll(".dot li")
   var picture = document.querySelectorAll(".picture img")
   var left = document.querySelector(".left")
   var right = document.querySelector(".right")
   var aaa = document.querySelector(".aaa")
   var index = 0 //設置索引號變量
   picture[index].style.opacity = 1 //第一張圖片顯示出來
   //右按鈕換圖
   right.onclick = function() {
    fn("+")
   }
   //左按鈕換圖
   left.onclick = function() {
    fn("-")
   }
   //定時器換圖,每隔3000毫秒換圖
   var timer = setInterval(function() {
    fn("+")
   }, 3000)
   //鼠標進入暫停
   aaa.onmouseover = function() {
    clearInterval(timer)
   }
   //鼠標離開繼續(xù)
   aaa.onmouseout = function() {
    timer = setInterval(function() {
     fn("+")
    }, 3000)
   }
   //鼠標觸碰小點換圖
   for (var i = 0; i < lis.length; i++) {
    lis[i].in = i
    lis[i].onmouseover = function() {
     fn(this.in)
    }
   }
   //函數(shù)
   function fn(ope) {
    picture[index].style.opacity = 0 //上一張圖片隱藏
    lis[index].className = "" //清除小點樣式
    //判斷ope
    if (typeof ope === 'number') {
     index = ope
    } else if (ope === '+') { //判斷是否右按鈕
     if (index === 4) {
      index = 0
     } else {
      index++
     }
    } else {
     if (index === 0) { //判斷是否左按鈕
      index = 4
     } else {
      index--
     }
    }
    picture[index].style.opacity = 1 //當前圖片顯示
    lis[index].className = "spot" //給小點加上樣式
   }
  </script>
 </body>
</html>

效果如圖所示：