JavaScript 经典轮播图的代码实现_js轮播图取后端返回-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46236141/article/details/105377768

本文通过实例讲解如何使用JavaScript实现一个具有自动播放、鼠标悬停暂停、导航按钮控制的轮播图。首先构建HTML结构，接着设置CSS样式，最后通过JavaScript编写动态效果，包括获取元素、定义函数和绑定事件，完成轮播图的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

轮播图大概都是什么样的呢，我们以淘宝网首页这个样式为例：
在这里插入图片描述
这是个很经典的轮播图，这里有五张图轮序自动播放，鼠标移上去时它会自动停下来，鼠标移开时它又会继续自动播放，下方的五个按钮和左右按钮都可以控制轮播图的播放顺序。那么接下来我们就亲自动手实现以下这种效果：

1. 构建html结构

<div class="banner">
    <ul>
        <li><img src="images/ⅩⅢ-201.jpg" alt="#"></li>
        <li><img src="images/ⅩⅢ-202.jpg" alt="#"></li>
        <li><img src="images/ⅩⅢ-204.jpg" alt="#"></li>
        <li><img src="images/ⅩⅢ-205.jpg" alt="#"></li>
        <li><img src="images/ⅩⅤ07.jpg" alt="#"></li>
    </ul>
    <ol></ol>
    <div class="dirBtn">
        <a name="left" href="JavaScript:;"><span name="left" class="iconfont iconzuo"></span></a>
        <a name="right" href="JavaScript:;"><span name="right" class="iconfont iconyou"></span></a>
    </div>
</div>

这里我用的是我自己存的图片，如果你想展示你的图片，只需更改img标签中的路径即可。

而且这里我的左右方向用的是字体图标，你也可以选择使用字符实体。

2. 设置css样式

body,div,ul,li,ol,a{
   
    margin: 0;padding: 0;
    list-style: none;
    text-decoration: none;
    font-size: 0;
}
img{
   
    display: block;
    width: 100%;
    height: 100%;
}
.banner{
   
    width: 480px;
    height: 270px;
    position: relative;
    margin: 200px auto;
    border: solid 5px #7d777b;
    /* overflow: hidden; */
}
.banner ul{
   
    width: 500%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
}
.banner ul li{
   
    float: left;
    width: 480px;
    height: 100%;
}
.banner ol{
   
    width: 100%;
    height: 40px;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    display: flex