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

最新推荐文章于 2024-07-31 21:34:37 发布

m0_54850825

最新推荐文章于 2024-07-31 21:34:37 发布

阅读量5.9k

点赞数

分类专栏：前端 html 文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/m0_54850825/article/details/123212765

版权

本文介绍了如何用JavaScript和CSS3创建一个具有左右切换和鼠标悬停停止功能的轮播图。轮播图由ul和li组成，通过调整li的z-index实现图片的切换。代码分为样式设置、DOM元素动态创建、轮播图函数封装以及左右箭头事件绑定等步骤。读者可以按需调整代码以实现不同效果。

摘要由CSDN通过智能技术生成

效果一：

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

效果二：

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

实现原理

轮播图整体是放在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 = 'img