用JavaScript基礎寫一個圖片輪播效果 + 思路詳解

用JavaScript的基本知識去寫一個輪播圖，其實輪播圖有很多方法去實現，像用一些框架，Bootstrap之類的，或者CSS3都可以輕鬆做出漂亮的輪播圖，這次去用JavaScript實現，主要是爲了鍛鍊自己使用Js的能力，代碼非常簡單，我會先放出HTML和CSS部分，最後詳細講解Js部分，還是那句話，重要的是思路，希望Js的初學者可以跟着我動手敲一敲，絕對對自己的能力有提升！

HTML代碼部分

<div class="main_div">
   <div class="arrows">
         <span title="1" class="arrow"><</span>
         <span title="0" class="arrow" style="float: right">></span>
   </div>

   <ul class="ul_img">
         <li class="li_img">![](images/攝圖網-水珠在竹葉上.jpg)</li>
         <li class="li_img">![](images/攝圖網-在海邊的人.jpg)</li>
         <li class="li_img">![](images/攝圖網-清涼的荷葉.jpg)</li>
         <li class="li_img">![](images/攝圖網-綿延不絕的山嶺.jpg)</li>
   </ul>
</div>

<div style="margin-left: 600px">
         <div class="div_btn"></div>
         <div class="div_btn"></div>
         <div class="div_btn"></div>
         <div class="div_btn"></div>

整個HTML非常簡單，分三部分，第一部分就是四張圖片，第二部分就是左右方向鍵，第三部分就是底部的四個圓角矩形，沒什麼說的，爲了簡化代碼，都是最簡單的。

CSS代碼部分

<style>
        img {
            width: 100%;
        }

        .li_img {
            width: 800px;
            float: left;
            list-style: none;
        }

        .ul_img {
            width: 6000px;
            padding: 0px;
            margin: 0px;
            transition: all 2s;
        }

        .main_div {
            width: 800px;
            overflow: hidden;
            position: relative;
            top: 100px;
            left: 350px;
        }

        .arrows {
            z-index: 9999;
            position: absolute;
            padding-top: 230px;
            width: 800px;
        }

        .arrows span {
            font-size: 3em;
            color: seashell;
        }

        .arrows span:hover {
            /*變小手*/
            cursor: pointer;
            background-color: rgba(192, 192, 192, 0.29);
        }

        .div_btn {
            float: left;
            border-radius: 100px;
            background-color: aquamarine;
            width: 60px;
            height: 10px;
            margin-left: 10px;
            margin-top: 130px;
        }

        .div_btn:hover {
            background-color: aqua;

        }
    </style>

CSS部分也是儘量簡潔，沒有設置太花哨的樣式，隨意設置了一下，各位可以自己發揮，主要爲了寫JavaScript……唯一要注意的就是我爲.li_img設置了一個transition。
由於是用固定像素設置的寬高，所以不同瀏覽器可能會顯示樣式有所區別，不影響功能就是了，這裏我使用調試的瀏覽器是Chrome和Firefox

JavaScript部分

請先不要直接看這部分代碼，先看我的思路講解再看這部分，你絕對可以輕鬆理解

<script>
    //跑動的次數
    var count = 0;
    //動畫的執行方向
    var isgo = false;
    //定義計時器對象
    var timer;
    
    window.onload = function () {
        /*獲取ul元素*/
        var ul_img = document.getElementsByClassName("ul_img")[0];
        //獲取所有的li圖片元素
        var li_img = document.getElementsByClassName("li_img");
        //獲取控制方向的箭頭元素
        var arrow = document.getElementsByClassName("arrow");
        //獲取所有按鈕元素
        var div_btn = document.getElementsByClassName("div_btn");
        div_btn[0].style.backgroundColor = "aqua";


        /*定義計時器，控制圖片移動*/
        showtime();
        function showtime() {
            timer = setInterval(function () {
                if (isgo == false) {
                    count++;
                    ul_img.style.transform = "translate(" + -800 * count + "px)";
                    if (count >= li_img.length - 1) {
                        count = li_img.length - 1;
                        isgo = true;
                    }
                }
                else {
                    count--;
                    ul_img.style.transform = "translate(" + -800 * count + "px)";
                    if (count <= 0) {
                        count = 0;
                        isgo = false;
                    }
                }

                for (var i = 0; i < div_btn.length; i++) {
                    div_btn[i].style.backgroundColor = "aquamarine";
                }
                
                div_btn[count].style.backgroundColor = "aqua";
                
            }, 4000)
        }

        /*鼠標進入左右方向鍵操作*/
        for (var i = 0; i < arrow.length; i++) {
            //鼠標懸停時
            arrow[i].onmouseover = function () {
                //停止計時器
                clearInterval(timer);
            }
            //鼠標離開時
            arrow[i].onmouseout = function () {
                //添加計時器
                showtime();
            }
            arrow[i].onclick = function () {
                //區分左右
                if (this.title == 0) {
                    count++;
                    if (count > 3) {
                        count = 0;
                    }
                }
                else {
                    count--;
                    if (count < 0) {
                        count = 3;
                    }
                }

                ul_img.style.transform = "translate(" + -800 * count + "px)";

                for (var i = 0; i < div_btn.length; i++) {
                    div_btn[i].style.backgroundColor = "aquamarine";
                }
                div_btn[count].style.backgroundColor = "aqua";
            }
        }

        //鼠標懸停在底部按鈕的操作
        for (var b = 0; b < div_btn.length; b++) {
            div_btn[b].index = b;
            div_btn[b].onmouseover = function () {

                clearInterval(timer);

                for (var a = 0; a < div_btn.length; a++) {
                    div_btn[a].style.backgroundColor = "aquamarine";
                }
                div_btn[this.index].style.backgroundColor = "aqua";
                //讓count值對應
                //爲了控制方向
                if (this.index == 3) {
                    isgo = true;
                }
                if (this.index == 0) {
                    isgo = false;
                }
                count = this.index;
                ul_img.style.transform = "translate(" + -800 * this.index + "px)";
            }
            div_btn[b].onmouseout = function () {
                //添加計時器
                showtime();
            }
        }
    }
</script>

思路詳解

首先，在思考這個輪播圖怎麼去實現的時候，請先考慮要爲這個輪播圖設置什麼樣的功能，我設定的有三個功能：

圖片可以自動右向輪播，輪播至最後一張圖片的時候，反向向左輪播，循環反覆
可以用左右方向鍵去控制圖片輪播方向
可以利用下方的圓角矩形來選擇瀏覽某一張圖片
在明確了功能之後，接下來依次解決不就行了，好，我們看第一個問題，怎麼實現圖片可以自動右向輪播，輪播至最後一張圖片的時候，反向向左輪播，循環反覆呢？沒錯，使用定時器setTimeout()或者setInterval()可以輕鬆解決，在這裏我就使用setInterval()

第一個功能

要想讓圖片自動輪播，我們首先去設定一個函數showtime()，當然寫完了這個函數，我們的第一個功能也就完成了，首先你得思考，既然圖片一開始向右輪播，你總得先設定一個方向吧，然後再考慮，還得設定一個跑動的次數，比如初始位置爲第一張圖片，我要向右跑動3次，就可以到達第四張圖片，然後還要設定一個定時器對象，用處以後會說到，這幾個必須是全局變量，所以必須在一開始就聲明：

 //跑動的次數
    var count = 0;
    //動畫的執行方向
    var isgo = false;
    //定義計時器對象
    var timer;

然後可以開寫了，當然要先獲取圖片元素：

/*獲取ul元素*/
    var ul_img = document.getElementsByClassName("ul_img")[0];
    //獲取所有的li圖片元素
    var li_img = document.getElementsByClassName("li_img");

好的，準備工作到此結束，圖片輪播的原理就是圖片排成一行，然後準備一個只有一張圖片大小的容器，對這個容器設置超出部分隱藏，在控制定時器來讓這些圖片整體左移或右移，這樣呈現出來的效果就是圖片在輪播了，我們這裏先function一個showtime()函數，並在裏邊添加一個定時器來爲控制圖片輪播做準備：

  function showtime() {
         timer = setInterval(function (){ }, 4000);
      }

在上面，我定義了每次延遲4000毫秒（即4秒）來執行一次setInterval()裏的匿名函數function(){ }，是爲了儘可能的讓輪播效果不至於太快。然後我在匿名函數function(){ }加入以下三行代碼：

function showtime() {
         timer = setInterval(function (){
            if (isgo == false) {
               count++;
               ul_img.style.transform = "translate(" + -800 * count + "px)";
         }
     }, 4000);
 }

記得之前我們聲明瞭isgo全局變量,併爲它賦值爲布爾值false嗎？這裏if判斷語句會直接成立，if中的語句會讓count加一，併爲ul_img設置了style樣式，讓ul_img整體（即四張圖片整體的ul）向左移動800px，（因爲在CSS中爲圖片設置了width爲800px），所以以上語句會控制圖片集體向左推入800px的距離，讓第二張圖片進入到顯示容器中，、（在此之前第二三四張圖片都是隱藏的，因爲我設置了超出部分隱藏），所以此時輪播圖的狀態是第二張圖片顯示，第一三四張圖片隱藏，然後每隔4秒就會重複上述過程，然後這樣就實現了輪播……嗎？

很快你就會發現問題，那就是當向左移動了三次（即count = 3時），顯示的是第四張圖片，這沒問題對吧，但是再過4秒，可就不妙了，你會發現圖片再往左移（即 count = 4時），媽蛋！沒圖了！顯示的是空白，怎麼解決呢？hin簡單！加一個if判斷語句不就行了！

function showtime() {
         timer = setInterval(function (){
            if (isgo == false) {
               count++;
               ul_img.style.transform = "translate(" + -800 * count + "px)";
                 if (count >= li_img.length - 1) {
                        count = li_img.length - 1;
                        isgo = true;
              }
         }
     }, 4000);
 }

以上代碼，我加了一個判斷語句，在count大於等於li.img.length-1（即count >= 3）時，禁止count再自增，同時改變isgo的值，讓輪播圖開始反向滾動，所以就會在增加一個else來描述isgo=true的情況：

function showtime() {
         timer = setInterval(function (){
        if (isgo == false) {
               count++;
               ul_img.style.transform = "translate(" + -800 * count + "px)";
                 if (count >= li_img.length - 1) {
                        count = li_img.length - 1;
                        isgo = true;
              }
         else {
                    count--;
                    ul_img.style.transform = "translate(" + -800 * count + "px)";
                    if (count <= 0) {
                        count = 0;
                        isgo = false;
                    }
              }
     }, 4000);
}
  showtime()；

else的情況就是控制圖片反向輪播，所以以上代碼很好理解，就是count--，並且在count <= 0時，爲isgo重新設置false，讓圖片再正向輪播，循環往復，最後再調用showtime()函數，第一個功能到此爲止就完全實現了！

第二個功能
第二個功能我們要添加鼠標進入左右兩個方向鍵的操作，首先獲取左右兩個方向鍵。

     //獲取控制方向的箭頭元素
     var arrow = document.getElementsByClassName("arrow");

好了，由於方向鍵有兩個，所以我們要來用for循環來爲它們綁定事件：

for (var i = 0; i < arrow.length; i++) {
      //鼠標懸停時
      arrow[i].onmouseover = function () {
      //停止計時器
      clearInterval(timer);
     }
      //鼠標離開時
      arrow[i].onmouseout = function () {
      //添加計時器
      showtime();
    }
}

以上四條語句爲方向鍵綁定了兩個事件，鼠標懸停時，我們利用clearInteral()來終止定時器，這就是前面我們把timer要聲明爲全局變量的原因，便於我們可以在想停止定時器的時候停止它。接下來我們爲方向鍵添加onclick事件，以便我們可以通過其控制方向：

for (var i = 0; i < arrow.length; i++) {
      //鼠標懸停時
      arrow[i].onmouseover = function () {
      //停止計時器
      clearInterval(timer);
      }
      //鼠標離開時
      arrow[i].onmouseout = function () {
      //添加計時器
      showtime();
     }
     arrow[i].onclick = function () {
     //區分左右
     if (this.title == 0) {
       count++;
      if (count > 3) {
       count = 0;
     }
    }
      else {
       count--;
      if (count < 0) {
       count = 3;
     }
    }
   ul_img.style.transform = "translate(" + -800 * count + "px)";
 }
}

不知道大家注意到了沒有，我在之前HTML中爲左右方向鍵分別設置了title值：0和1；所以這裏直接用title值來區分左右，爲右方向鍵我們執行count++；爲左方向鍵我們執行count--；同時也考慮到count>3和count<0的情況，這些之前提到過，這裏不再贅述，到此爲止，第二部分的功能也實現了，很簡單吧

第三個功能
鼠標懸停在底部圓角矩形的操作，同樣的道理，首先獲取四個圓角矩形，然後用for循環爲它們綁定事件：


var div_btn = document.getElementsByClassName("div_btn");
     div_btn[0].style.backgroundColor = "aqua";       
     //鼠標懸停在底部按鈕的操作
     for (var b = 0; b < div_btn.length; b++) {
            div_btn[b].index = b;
            div_btn[b].onmouseover = function () {}
            div_btn[b].onmouseout = function () {}
}

好，接下來我們先寫鼠標懸停事件：

div_btn[b].onmouseover = function () {
      clearInterval(timer);

      for (var a = 0; a < div_btn.length; a++) {
          div_btn[a].style.backgroundColor = "aquamarine";
       }
          div_btn[this.index].style.backgroundColor = "aqua";
      //爲了控制方向
      if (this.index == 3) {
         isgo = true;
       }
      if (this.index == 0) {
         isgo = false;
       }
      //讓count值對應
      count = this.index;
      ul_img.style.transform = "translate(" + -800 * this.index + "px)";
    }
}

有了之前的基礎，我在講鼠標懸停事件的時候，各位應該就更容易理解了，我首先在鼠標懸停時用 clearInterval(timer);來停止定時器，然後爲每個圓角矩形都加上顏色，並且爲懸停的圓角矩形變色，之後考慮到了大於三和小於零的情況，再之後，我把當前的index屬性值賦給count，讓用戶可以通過懸停底部圓角矩形來選擇看第幾張圖片。

最後再加上鼠標離開事件：

 div_btn[b].onmouseout = function () {
      //添加計時器
      showtime();
    }
}

至此所有功能寫完。其實最後還有一步就是：

for (var a = 0; a < div_btn.length; a++) {
          div_btn[a].style.backgroundColor = "aquamarine";
       }
          div_btn[count].style.backgroundColor = "aqua";
}

將以上代碼，添加到功能一和功能二的代碼裏，目的是，讓圖片自動輪播和控制左右方向鍵時，底部圓角矩形也能隨之變色。

最後再放一遍完整的JS代碼：

<script>
    var count = 0;
    var isgo = false;
    var timer;
    
    window.onload = function () {
        var ul_img = document.getElementsByClassName("ul_img")[0];
        var li_img = document.getElementsByClassName("li_img");
        var arrow = document.getElementsByClassName("arrow");
        var div_btn = document.getElementsByClassName("div_btn");
        div_btn[0].style.backgroundColor = "aqua";


        showtime();
        function showtime() {
            timer = setInterval(function () {
                if (isgo == false) {
                    count++;
                    ul_img.style.transform = "translate(" + -800 * count + "px)";
                    if (count >= li_img.length - 1) {
                        count = li_img.length - 1;
                        isgo = true;
                    }
                }
                else {
                    count--;
                    ul_img.style.transform = "translate(" + -800 * count + "px)";
                    if (count <= 0) {
                        count = 0;
                        isgo = false;
                    }
                }
                for (var i = 0; i < div_btn.length; i++) {
                    div_btn[i].style.backgroundColor = "aquamarine";
                }     
                div_btn[count].style.backgroundColor = "aqua";
                
            }, 4000)
        }


        for (var i = 0; i < arrow.length; i++) {
            arrow[i].onmouseover = function () {
                clearInterval(timer);
            }
            arrow[i].onmouseout = function () {
                showtime();
            }
            arrow[i].onclick = function () {
                if (this.title == 0) {
                    count++;
                    if (count > 3) {
                        count = 0;
                    }
                }
                else {
                    count--;
                    if (count < 0) {
                        count = 3;
                    }
                }

                ul_img.style.transform = "translate(" + -800 * count + "px)";

                for (var i = 0; i < div_btn.length; i++) {
                    div_btn[i].style.backgroundColor = "aquamarine";
                }
                div_btn[count].style.backgroundColor = "aqua";
            }
        }
        for (var b = 0; b < div_btn.length; b++) {
            div_btn[b].index = b;
            div_btn[b].onmouseover = function () {

                clearInterval(timer);

                for (var a = 0; a < div_btn.length; a++) {
                    div_btn[a].style.backgroundColor = "aquamarine";
                }
                div_btn[this.index].style.backgroundColor = "aqua";
                if (this.index == 3) {
                    isgo = true;
                }
                if (this.index == 0) {
                    isgo = false;
                }
                count = this.index;
                ul_img.style.transform = "translate(" + -800 * this.index + "px)";
            }
            div_btn[b].onmouseout = function () {         
                showtime();
            }
        }
    }
</script>

用JavaScript基礎寫一個圖片輪播效果 + 思路詳解

開源高性能結構化日誌模塊NanoLog

【簡寫Mybatis-02】註冊機的實現以及SqlSession處理

手繪二維碼

.NET藉助虛擬網卡實現一個簡單異地組網工具

10個demo示例學會CSS3 radial-gradient徑向漸變

程序員的技術世界觀

利用HTML5，無JS實現各種交互效果

瞭解CSS3的all屬性

爲何Node.js 能成爲 Web 應用開發最佳選擇？【強推理由】

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結