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

1、複習原生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函數