轮播图的多种实现及原理

￡神魔★判官ぃ 2022-12-31 06:22 133阅读 0赞

## **【写在前面】** ##

最近，在自己的项目中遇到了很多轮播图。

当然，这里的很多，并非数量多，指的是种类很多，即多种实现。

然后我觉得有不少小技巧，就决定写一篇文章讲解一下。

本篇主要内容：

1、**轮播图的多种实现( 含动态图 )。**

2、**效果对比和更好的建议。**

--------------------

### **【正文开始】** ###

*  **实现一**：

相当常见且简单的实现方法：

1、将所有的图片并排。

2、依次平移即可。

HMTL 和 CSS部分：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>轮播图</title>
        <style>
            ul,
            ol {
                list-style: none;
                padding: 0px;
                margin: 0px;
            }
    
            #main {
                width: 600px;
                height: 350px;
                margin: 30px auto;
                position: relative;
            }
    
            #display {
                width: 600px;
                height: 350px;
                overflow: hidden;
                position: relative;
                -webkit-user-select: none;
            }
    
            #display ul {
                position: relative;
                left: 0;
                top: 0px;
                width: 3600px;
                height: 350px;
                transition: left 500ms linear;
            }
    
            #list li {
                float: left;
                width: 600px;
                height: 350px;
            }
    
            #arrow {
                display: none;
            }
    
            #arrow span {
                position: absolute;
                width: 40px;
                height: 40px;
                line-height: 40px;
                left: 5px;
                top: 50%;
                margin-top: -20px;
                background: #000;
                cursor: pointer;
                text-align: center;
                font-weight: bold;
                font-family: 黑体, SimHei;
                font-size: 30px;
                color: #fff;
                opacity: 0.4;
                border: 1px solid #fff;
                -webkit-user-select: none;
            }
    
            #arrow span:hover {
                opacity: 0.7;
            }
    
            #arrow #right {
                right: 5px;
                left: auto;
            }
    
            #index_container {
                position: absolute;
                width: 210px;
                height: 30px;
                right: 20px;
                bottom: 20px;
            }
    
            #index_container .index {
                float: left;
                width: 30px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                opacity: 0.8;
                background: #fff;
                border: 1px solid #ccc;
                margin-left: 10px;
                cursor: pointer;
                -webkit-user-select: none;
            }
    
            #index_container .current {
                background: #ec3d3d;
            }
        </style>
        <script>
        </script>
    </head>
    <body>
        <div id="main">
            <div id="display">
                <ul id="list">
                    <li><img src="images/0.jpg" width="600" height="350"/></li>
                    <li><img src="images/1.jpg" width="600" height="350"/></li>
                    <li><img src="images/2.jpg" width="600" height="350"/></li>
                    <li><img src="images/3.jpg" width="600" height="350"/></li>
                    <li><img src="images/4.jpg" width="600" height="350"/></li>
                </ul>
                <ol id="index_container"></ol>
                <div id="arrow">
                    <span id="left" title="前一张"><</span>
                    <span id="right" title="后一张">></span>
                </div>
            </div>
        </div>
    </body>
    </html>

其中 <script> 部分：

关键部分为 move() 函数，即平移整个轮播图像列表( 根据跳转索引 index )。

效果如下：

![20201228215940252.gif][]

*  **实现二( 代码见结语 )：**

1、将所有图片叠在一起。

2、如果为当前图片则设置 ( z-index )，使其在最顶层。

3、使用 opacity 过渡代替方法一中的平移过渡( left )：

效果如下：

![20201228221417825.gif][]

*  ** 实现三：**

先来看看去掉 overflow: hidden 后的效果：

![20201228222700269.gif][]

1、将所有图像复制一轮后并排。

2、同方法一，依次平移。

3、**重要：平移一轮到复制的图像的第一张\[ 结束后 \] ，立即将** **left** **设置为** **0px ( 我这里用了 jquery，也可不用 )****。**

效果如下：

![2020122822231297.gif][]

--------------------

### **【结语】** ###

呼~偷了个懒，实现一和实现二的代码在：[https://github.com/mengps/Web-jx][https_github.com_mengps_Web-jx]

话说这个项目有相当多的小技巧( css3 和 js )，请多多 star 呀..⭐\_⭐

最后来总结一下：

实现一：**优点是**简单，**缺点是**不够连贯，且首尾没有无缝滚动。

实现二：**优点是**过渡平滑，相隔几个切换也相当丝滑，**缺点是**不够好看，视觉效果差了点。

实现三：**优点是**无缝滚动，也相当丝滑，**基本没有什么缺点**。

[20201228215940252.gif]: /images/20221120/1fde39e11caa4485be62a67eb8614f68.png
[20201228221417825.gif]: /images/20221120/6cc447df7f6940c992c943f82bde9881.png
[20201228222700269.gif]: /images/20221120/e023ef1b7b1c466c9ceab859bb871ee1.png
[2020122822231297.gif]: /images/20221120/82ff7d7cf4fe46e1a45f026be414c1cb.png
[https_github.com_mengps_Web-jx]: https://github.com/mengps/Web-jx