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

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

_linWang

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

阅读量1.7w

点赞数 53

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

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

版权

JS 专栏收录该内容

4 篇文章 2 订阅

订阅专栏

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

摘要由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/' + i + '.jpg';
    cur_img.style.width = '400px';
    cur_img.style.height = '200px';
    // 把img元素插入到创建的li里面
    cur_li.appendChild(cur_img);
    // 然后在把li插入到ul里面
    cur_ul.appendChild(cur_li);
    // 然后给ul元素设置事件，鼠标移进来停止轮播
    cur_ul.onmouseenter = function () {
        clearInterval(timer)
    }
    // 鼠标移出ul又继续轮播图片
    cur_ul.onmouseleave = function () {
        timer = setInterval(get_next, 3000)
    }
    // 当创建完一个li（li里已经有img元素）就把li添加到arr数组里
    // arr里存的li 相当于一个对象，在其他地方在把arr里的li取出来，还是指向原来那个，并不是一个新的li
    // 相当于对象的浅拷贝，指针指向问题
    arr.push(cur_li)
}

arr里存的li 相当于存了一个对象，存的只是这个li的引用地址，在其他地方再把arr里的li取出来，还是指向原来那个li，修改的也还是原来那个li，并不是一个新的li。

4.JS代码部分，设置轮播图里图片的位置，因为轮播要显示三张图片，即第一种效果，如果要实现第二种效果，这个代码可以不写，然后在设置一下ul的宽即可实现效果二

// 因为所写的轮播图是中间图片放大大，左右两边图片正常，所以要进行下面的操作
// 如果你只需要那种一张张图片轮播，即没有左右两边的轮播图，可以去掉下面代码
// 我们要三张图片进行展示， 左 中 右  
var len = arr.length - 1;
// 这是取得左边图片并调整位置
arr[len - 2].style.left = '0px';
// 这是取得中间图片并调整位置
arr[len - 1].style.left = '200px';
// 这是取得右边图片并调整位置
arr[len].style.left = '400px';
// 然后中间图片调用scale使其变大
arr[len - 1].style.transform = 'scale(1.3)'
// 中间图片也给其一个较大的堆叠数值，使其中间图片在左右图片上面
arr[len - 1].style.zIndex = 100;

5、JS代码部分，封装轮播图函数，我们使用一个间歇定时器setInterval来轮播图片（会每隔相应的时间来执行其里面的代码）

// 然后开始进行轮播，原理就是换arr里的li元素的位置，越靠后的li元素z-index越大
// z-index越大，就会叠在其他li元素上面，所以换arr里的li位置就可以实现轮播
function get_next() {
    var give_up = arr[arr.length - 1];//获取arr数值里最后一个li元素
    arr.pop();//删除掉最后一个li元素
    arr.unshift(give_up);//最后把最后一个元素插入到arr数组的前面
    // 然后重新给arr数组里的li元素设置z-index和scale
    for (var i = 0; i < arr.length; i++) {
        arr[i].style.zIndex = i;
        arr[i].style.transform = 'scale(1)'
    }
    // 这步就是展示arr的后三张图片，和前一个步骤的一样
    arr[len - 2].style.left = '0px';
    arr[len - 1].style.left = '200px';
    arr[len].style.left = '400px';
    arr[len - 1].style.transform = 'scale(1.3)'
    arr[len - 1].style.zIndex = 100;
}
// 声明一个定时器，然后把轮播图函数放进间歇函数，3秒进行一次轮播
var timer = setInterval(get_next, 3000)

6.JS代码部分，接下来就是左右两个箭头的创建了

// 用js创建左箭头
var pre_img = document.createElement('img')
pre_img.src = 'img/preImg.png';//左箭头图片
pre_img.style.position = 'absolute';
pre_img.style.top = 0;
pre_img.style.bottom = 0;
pre_img.style.left = 0;
pre_img.style.margin = 'auto';
pre_img.style.zIndex = 100;
cur_ul.appendChild(pre_img);

// 用js创建右箭头
var next_img = document.createElement('img')
next_img.src = 'img/nexImg.png';//右箭头的图片
next_img.style.position = 'absolute';
next_img.style.top = 0;
next_img.style.bottom = 0;
next_img.style.right = 0;
next_img.style.margin = 'auto';
next_img.style.zIndex = 100;
cur_ul.appendChild(next_img);

7.然后给箭头绑定点击事件

// 给左箭头点击绑定事件
pre_img.onclick = function () {
    get_pre();
}
// 右箭头的作用就是向前轮播一直图片，和我们上面写的get_next()方法要实现的功能一样，直接引用
next_img.onclick = function () {
    get_next();
}

// 左箭头的绑定事件 和get_next()思路一样，就是要改一下就行。
// 先取出arr数组第一个li，在把这个li放到最后即可
function get_pre() {
    var give_up = arr[0];
    arr.shift();//取出来最后一张图片
    arr.push(give_up);//把最后一张图片放到第一张
    for (var i = 0; i < arr.length; i++) {
        arr[i].style.zIndex = i;
        arr[i].style.transform = 'scale(1)'
    }
    arr[len - 2].style.left = '0px';
    arr[len - 1].style.left = '200px';
    arr[len].style.left = '400px';
    arr[len - 1].style.transform = 'scale(1.3)'
    arr[len - 1].style.zIndex = 100;
}

整体代码

如果要直接复制，注意要修改下图片的路径，不然你的轮播图名字要是 1.jpg、2.jpg、3.jpg...就行

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <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>
</head>

<body>
    <ul id="banner"></ul>
    <script>
        //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/' + i + '.jpg';
            cur_img.style.width = '400px';
            cur_img.style.height = '200px';
            // 把img元素插入到创建的li里面
            cur_li.appendChild(cur_img);
            // 然后在把li插入到ul里面
            cur_ul.appendChild(cur_li);
            // 然后给ul元素设置事件，鼠标移进来停止轮播
            cur_ul.onmouseenter = function () {
                clearInterval(timer)
            }
            // 鼠标移出ul又继续轮播图片
            cur_ul.onmouseleave = function () {
                timer = setInterval(get_next, 3000)
            }
            // 当创建完一个li（li里已经有img元素）就把li添加到arr数组里
            // arr里存的li 相当于一个对象，在其他地方在把arr里的li取出来，还是指向原来那个，并不是一个新的li
            // 相当于对象的浅拷贝，指针指向问题
            arr.push(cur_li)
        }

        // 因为所写的轮播图是中间图片放大大，左右两边图片正常，所以要进行下面的操作
        // 如果你只需要那种一张张图片轮播，即没有左右两边的轮播图，可以去掉下面代码
        // 我们要三张图片进行展示， 左 中 右  
        var len = arr.length - 1;
        // 这是取得左边图片并调整位置
        arr[len - 2].style.left = '0px';
        // 这是取得中间图片并调整位置
        arr[len - 1].style.left = '200px';
        // 这是取得右边图片并调整位置
        arr[len].style.left = '400px';
        // 然后中间图片调用scale使其变大
        arr[len - 1].style.transform = 'scale(1.3)'
        // 中间图片也给其一个较大的堆叠数值，使其中间图片在左右图片上面
        arr[len - 1].style.zIndex = 100;

        // 封装轮播图函数 
        // 然后开始进行轮播，原理就是换arr里的li元素的位置，越靠后的li元素z-index越大
        // z-index越大，就会叠在其他li元素上面，所以换arr里的li位置就可以实现轮播
        function get_next() {
            var give_up = arr[arr.length - 1];//获取arr数值里最后一个li元素
            arr.pop();//删除掉最后一个li元素
            arr.unshift(give_up);//最后把最后一个元素插入到arr数组的前面
            // 然后重新给arr数组里的li元素设置z-index和scale
            for (var i = 0; i < arr.length; i++) {
                arr[i].style.zIndex = i;
                arr[i].style.transform = 'scale(1)'
            }
            // 这步就是展示arr的后三张图片，和前一个步骤的一样
            arr[len - 2].style.left = '0px';
            arr[len - 1].style.left = '200px';
            arr[len].style.left = '400px';
            arr[len - 1].style.transform = 'scale(1.3)'
            arr[len - 1].style.zIndex = 100;
        }
        // 声明一个定时器，然后把轮播图函数放进间歇函数，3秒进行一次轮播
        var timer = setInterval(get_next, 3000)


        // 用js创建左箭头
        var pre_img = document.createElement('img')
        pre_img.src = 'img/preImg.png';//左箭头图片
        pre_img.style.position = 'absolute';
        pre_img.style.top = 0;
        pre_img.style.bottom = 0;
        pre_img.style.left = 0;
        pre_img.style.margin = 'auto';
        pre_img.style.zIndex = 100;
        cur_ul.appendChild(pre_img);

        // 用js创建右箭头
        var next_img = document.createElement('img')
        next_img.src = 'img/nexImg.png';//右箭头的图片
        next_img.style.position = 'absolute';
        next_img.style.top = 0;
        next_img.style.bottom = 0;
        next_img.style.right = 0;
        next_img.style.margin = 'auto';
        next_img.style.zIndex = 100;
        cur_ul.appendChild(next_img);

        // 给左箭头点击绑定事件
        pre_img.onclick = function () {
            get_pre();
        }
        // 右箭头的作用就是向前轮播一直图片，和我们上面写的get_next()方法要实现的功能一样，直接引用
        next_img.onclick = function () {
            get_next();
        }

        // 左箭头的绑定事件 和get_next()思路一样，就是要改一下就行。
        // 先取出arr数组第一个li，在把这个li放到最后即可
        function get_pre() {
            var give_up = arr[0];
            arr.shift();//取出来最后一张图片
            arr.push(give_up);//把最后一张图片放到第一张
            for (var i = 0; i < arr.length; i++) {
                arr[i].style.zIndex = i;
                arr[i].style.transform = 'scale(1)'
            }
            arr[len - 2].style.left = '0px';
            arr[len - 1].style.left = '200px';
            arr[len].style.left = '400px';
            arr[len - 1].style.transform = 'scale(1.3)'
            arr[len - 1].style.zIndex = 100;
        }
    </script>
</body>

</html>