JS来实现轮播图（走马灯）可左右切换图片，鼠标移入会停止轮播

最新推荐文章于 2024-04-08 18:28:22 发布

_linWang

最新推荐文章于 2024-04-08 18:28:22 发布

阅读量1.8w

点赞数 53

分类专栏： JS 文章标签： javascript html5 css

本文链接：https://blog.csdn.net/LinWang__King/article/details/120162663

版权

本文详细介绍了如何使用JavaScript实现两种不同的轮播图效果，包括自动轮播和鼠标悬停停止轮播的功能。通过创建和操作DOM元素，设置CSS样式以及使用数组来管理元素顺序，实现了图片的动态切换。同时，文章还讲解了轮播图的实现原理，如利用z-index控制图片显示，以及使用定时器实现定时切换。此外，还提供了左右箭头的点击事件处理，使得用户可以手动切换图片。

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

效果一：

会自动进行轮播，当鼠标进入轮播图区域会停止轮播，点击左右箭头可以向前、向后进行切换图片

效果二：

这种效果比第一种效果简单，只要删除一些代码和修改一些样式即可。

实现原理

轮播图整体是放在ul里的，li里存放img图片（轮播的图片）

<ul>
     <li>
        <img>
     </li>
</ul>

给li元素进行绝对定位，且给每个li一个z-index值（堆叠数值，可以理解为z轴，数值越大，这个元素就会叠在数值小的元素上面，比如图片1的z-index大于图片2的，图片1就会显示，图片2会在图片1下面不显示，我们可以利用这点进行图片的轮换）。

然后我们把li元素放到一个arr数组中，并开始给每个li设置z-index，在arr数组中，位置越靠后（下标越大）的li，它的z-index越大，然后我们进行轮播，把arr数组中最后一个li换到数组前面，然后其他元素就挤上前，这样来，每个li都会有机会到arr数组的尾部，即z-index最大的地方，所以图片就会轮换。

代码部分

1.先设置整体样式。

<style>
        body {
            background-color: rgb(119, 115, 110);
        }

        ul {
            height: 200px;
            width: 800px;
            padding: 0;
            position: absolute;
            /* 水平居中 */
            left: 50%;
            margin-left: -400px;
            /* 垂直居中 */
            top: 50%;
            margin-top: -100px;
            list-style: none;
        }

        /* 移入到轮播图区域把鼠标形状变成‘手’ */
        ul:hover {
            cursor: pointer;
        }

        li {
            position: absolute;
            left: 0;
            /* 过渡属性，让轮播图切换更自然 */
            transition: 0.4s;
        }
    </style>

2.然后只在body里只写一个ul，li 和 img 都直接在js中循环创建

<body>
    <ul id="banner"></ul>
</body>

3.JS代码部分，获取ul 然后循环创建li 和 img

//1.获取ul
var cur_ul = document.getElementById('banner')
// 2.创建一个数组实例
var arr = new Array();

// 用js来创建li、img元素，有多少张图片要轮播就循环多少次
for (i = 1; i <= 5; i++) {
    // 创建li元素
    var cur_li = document.createElement('li')
    // 创建img元素
    var cur_img = document.createElement('img')
    // 给img元素设置src、width、height属性
    // 这里src是轮播图的路径
    // 在img文件夹下的图片命名为1.jpg、2.jpg、3.jpg....才可以这样写
    cur_img.src =

最低0.47元/天解锁文章