原生js實現圖片輪播思路分析

一、復習原生js實現圖片輪播

1.要點

• 自動輪播
• 點擊小圓圈按鈕，顯示相應圖片
• 點擊左右箭頭，實現向前向后輪播圖片

2.實現思路

<div id="container">
    <div id="list" style="left: -600px;">
        <img src="images/5.jpg" alt="1" />
        <img src="images/1.jpg" alt="1" />
        <img src="images/2.jpg" alt="2" />
        <img src="images/3.jpg" alt="3" />
        <img src="images/4.jpg" alt="4" />
        <img src="images/5.jpg" alt="5" />
        <img src="images/1.jpg" alt="5" />
    </div>
    <div id="buttons">
        <span index="1" class="on"></span>
        <span index="2"></span>
        <span index="3"></span>
        <span index="4"></span>
        <span index="5"></span>
    </div>
    <a href="javascript:;" id="prev" class="arrow">&lt;</a>
    <a href="javascript:;" id="next" class="arrow">&gt;</a>
</div>

（1）html和css

• 圖片方面：如果要輪播5張圖，那么頁面上要寫7張圖，額外的兩張圖主要是為了從第一張往前切換和最后一張往后切換的無縫銜接。
• 布局方面：主要使用絕對定位，分為兩層，一層包括圖片，一層包括小圓圈按鈕和切換箭頭

（2）js實現

• 自動輪播：定時器setInterval和clearInterval

• 輪播實現原理：

  1.首先思考，輪播時候發生的變化：

  圖片的變化（animate函數） + 小圓圈按鈕樣式變化（buttonsShow函數）

    1.圖片的變化：通過控制絕對定位的包含7張圖片的div的left值進行變化
    （這里需要考慮，left值<-3000px，left值>-600px這兩種邊緣情況，這正是當圖片從5.jpg往后切換變為1.jpg和圖片從1.jpg往前切換變為5.jpg）
    2.小圓圈按鈕樣式變化，先清除所有的樣式，然后再根據按鈕的index屬性值來判斷當前按鈕
  

  2.添加事件：

  • 小圓圈按鈕事件onclick
  • 左右箭頭事件（prev.onclick,next.onclick）
  • container這個div的onmouseover和onmouseout事件，分別執行play（自動輪播函數）和stop（清除自動輪播定時器）

  3.在這上面三個點擊事件中都要調用animate函數和buttonsShow函數