JS实现自动轮播图效果

现在很多网站都有轮播图，这篇文章主要为大家详细介绍了js实现轮播图的完整代码及原理，需要的小伙伴可以参考一下。
轮播图主要功能：
1、 图片自动轮播（主图切换同时下面导航图片也会跟着变化）
2、 鼠标悬停的时候，图片轮播停止，鼠标离开后继续
3、 单击左右按钮切换图片
4、 鼠标移入后左右按钮出现，移出消失
工作原理：
具体效果如下：


轮播图片数量、css样式等，小伙伴也可根据自己的需求做相应调整。
具体实现部分
特别重要的是，在我们写任何动态效果之前，我们应该先把静态页面写出来，在考虑动态效果的实现。
HTML代码：

<div id="div1">
    <ul class="big_pic">//主图部分
        <div class="prev">
            <a class="mark_left" href="#"></a>
        </div>
        <div class="next">
            <a class="mark_right" href="#"></a>
        </div>
        <div class="text">图片1详情</div>
        <div class="length">1/6</div>
        <li style="z-index: 1"><img src="images/flash_1.jpg" /></li>
        <li><img src="images/flash_2.jpg" /></li>
        <li><img src="images/flash_3.jpg" /></li>
        <li><img src="images/flash_4.jpg" /></li>
        <li>&