原生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函数