使用JavaScript實現輪播圖特效

本文例項為大家分享了實現輪播圖特效的具體程式碼，供大家參考，具體內容如下

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/">
   .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;/*游標呈現為指示連結的指標（一隻手）*/
   }
   .left {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 169px;
    text-align: center;
    background-color: #000000;
    line-height: 30px;
    color: #FFFFFF;
    cursor: pointer;/*游標呈現為指示連結的指標（一隻手）*/
   }
   .right {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 169px;
    right: 0;
    text-align: cent 
er;
    background-color: #000000;
    line-height: 30px;
    color: #FFFFFF;
    cursor: pointer;/*游標呈現為指示連結的指標（一隻手）*/
   }
   .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")
   vawww.cppcns.com 
r aaa = document.querySelecthttp://www.cppcns.comor(".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)
   }
   //滑鼠離開繼續
   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)
    }
   }
   //函式
   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
     CTczGZ} else {
      index++
     }
    } else {
     if (index === 0) { //判斷是否左按鈕
      index = 4
     } else {
      index--
     }
    }
    picture[index].style.opacity = 1 //當前圖片顯示
    lis[index].className = "spot" //給小點加上樣式
   }
  </script>
 </body>
</html>

效果如圖所示：

使用JavaScript實現輪播圖特效

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

使用JavaScript實現輪播圖特效

JavaScript實現輪播圖特效

JavaScript 實現輪播圖特效的示例

使用JavaScript實現輪播圖特效

jquery實現輪播圖特效

原生js實現輪播圖特效

js實現輪播圖特效

基於JavaScript實現輪播圖效果

原生JavaScript實現輪播圖

用JavaScript實現輪播圖效果

原生JavaScript實現輪播圖效果

JavaScript實現輪播圖案例

使用JavaScript實現輪播圖效果

HTML+CSS+Javascript實現輪播圖效果

JS實現普通輪播圖特效

js實現無縫輪播圖特效

JavaScript Dom實現輪播圖原理和例項

原生javascript+CSS實現輪播圖效果

兩行IOS程式碼實現輪播圖

jQuery實現輪播圖效果demo

JS實現輪播圖效果

使用JavaScript實現輪播圖特效

相關推薦