用原生js实现轮播图

清疚 2022-06-17 13:11 286阅读 0赞

今天分享一下简单的轮播图制作过程，用原生js实现。虽然网上有各种插件制作的高大上又好用的轮播图，但还是要清楚它的基本原理。

1.基本原理

将所有图片并排放到一个div中，然后再放到展示窗口当中，让装有所有图片的div通过改变left值，从而左右移动实现图片切换。

2.html代码

以一个有5张图片的轮播图为例，为了实现无缝滚动，需要在第一张图片前放置第五张图片，在 第五张图片后放置第一张图片，把这七张图片放在一个id为list的容器里面，把显示当前所在页的五个小圆点放在button容器里面，左右切换的按钮则用两个a链接表示。这几个部分全放在container容器里面。

3.css代码

* {
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        
        #container {
            margin: 20px;
            width: 600px;
            height: 400px;
            border: 3px solid #333;
            position: relative;
            overflow: hidden;
        }
        
        #list {
            /*七张图片*/
            width: 4200px;
            height: 400px;
            position: absolute;
            z-index: 1;
        }
        
        #list img {
            float: left;
            width: 600px;
            height: 400px;
        }
        
        #buttons {
            position: absolute;
            height: 10px;
            width: 100px;
            z-index: 2;
            bottom: 20px;
            right: 100px;
        }
        
        #buttons span {
            cursor: pointer;
            float: left;
            border: 1px solid #fff;
            border-radius: 50%;
            height: 10px;
            width: 10px;
            margin-right: 5px;
            background: #333;
        }
        
        #buttons .on {
            background: orangered;
        }
        
        .arrow {
            display: none;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-size: 30px;
            font-weight: bold;
            width: 40px;
            height: 40px;
            position: absolute;
            z-index: 2;
            top: 180px;
            color: #fff;
            background-color: RGBA(0, 0, 0, .3);
        }
        
        .arrow:hover {
            background-color: RGBA(0, 0, 0, .7);
        }
        
        #container:hover .arrow {
            display: block;
        }
        
        #pre {
            left: 20px;
        }
        
        #next {
            right: 20px;
        }

把七张图片设置为左浮动，宽度设置为600px，则放置这些图片的容器list的宽度为600\*7px，想象一下七张图片水平并排的放在一起。对最外层的容器设置 overflow: hidden;width：600px，则能够显示出来的只有一张图片，其他图片都被隐藏。

当list的left值为-600px时，相对于图片向左移动了600px，则第二张图片显示出来（七张图片里面的第二张）。

要设置左右切换按钮和小圆点的Z-index值大于图片的值，这样按钮才会显现出来。

4.js代码

g()函数可以通过id值找到对应元素，相对于jQuery里面的$(\#id).

设置一个定时器，在规定的时间内，每隔interval时间移动一次，直到一张图片彻底切换完毕。当前图片为第五张图片时，跳转到第一张图片，当前图片为第一张图片时，跳转到第五张图片。

当鼠标离开轮播图时，使用定时器每隔一段时间就切换下一张图片，相对于调用了next.onclick函数当鼠标放在轮播图上时，当鼠标放在轮播图上时，停止计时器。

**在线demo地址：[轮播图效果展示][Link 1]**

5.升级版

*  用js获取图片的数量和宽度，从而设置出对应数量的小圆点。
 *  把函数进行封装，方便下次调用
 *  可参考博客http://blog.csdn.net/diligentkong/article/details/55209861

6.其他

推荐一个很好用的轮播图插件-[myFocus][]，使用方法特别简单，只需要在在html的标签内引入相关文件，再选择任意一个位置调用，就可以使用很多轮播图特效了，有多种切换效果，而且图片加载速度比原生js要快。