手写原生JS轮播图

轮播图也称为焦点图，是网页中比较常见的网页特效

本文主要制作6个效果
效果1：
当鼠标移入轮播图时，左右箭头显示出来，离开隐藏左右按钮
效果2：
点击小圆点就会弹出相应的图片
效果3：
点击轮播图左右按钮就会有图片改变的效果
效果4：
图片和下面的小圆点会对应同步变化
效果5：
鼠标不经过轮播图，则图片会自动滚动播放
效果6：
鼠标经过轮播图模块，自动播放停止
7：
制作一个节流阀以防点击过快

制作效果前：

分析结构:

分为四个部分：大盒子，图片、左右按钮和小圆圈

准备好CSS和HTML：

HTML:

<div class="focus fl">
    <!-- 左右按钮 -->

    <!-- 左侧按钮 -->
    <a href="javascript:;" class="arrow-l">
        &lt;
    </a>
    <!-- 右侧按钮 -->
    <a href="javascript:;" class="arrow-r">
        &gt;
    </a>

    <!-- 图片 -->
    <!-- 核心的滚动区域 -->
    <ul>
        <li>
            <a href="#"><img src="upload/focus1.jpg" alt=""></a>
        </li>
        <li>
            <a href="#"><img src="upload/focus2.jpg" alt=""></a>
        </li>
        <li>
            <a href="#"><img src="upload/focus3.jpg" alt=""></a>
        </li>
        <li>
            <a href="#"><img src="upload/focus4.jpg" alt=""></a>
        </li>
    </ul>
    <!-- 小圆圈 -->
    <ol class="circle">


    </ol>
</div>

修改父级盒子的大小和图片盒子大小相同，因为考虑到可视性的原因，将图片大小统一改成800×600，因此父级盒子的大小也相应修改

CSS：

引入base.css

/* 引入base.css */

/*清除元素默认的内外边距  */
* {
    margin: 0;
    padding: 0
}
/*让所有斜体 不倾斜*/
em,
i {
    font-style: normal;
}
/*去掉列表前面的小点*/
li {
    list-style: none;
}
/*图片没有边框   去掉图片底侧的空白缝隙*/
img {
    border: 0;  /*ie6*/
    vertical-align: middle;
}
/*让button 按钮 变成小手*/
button {
    cursor: pointer;
}
/*取消链接的下划线*/
a {
    color: #666;
    text-decoration: none;
}

a:hover {
    color: #e33333;
}

引入轮播图的css：

.focus {
    position: relative;
    width: 800px;
    height: 600px;
    background-color: pur