软件定制开发供应商JS来实现轮播图（走马灯）可左右切换图片，鼠标移入会停止轮播-巴掌软件-高性价比的软件定制开发解决方案

效果一：

软件定制开发供应商会自动进行轮播，软件定制开发供应商当鼠标进入轮播图区域软件定制开发供应商会停止轮播，软件定制开发供应商点击左右箭头可以向前、软件定制开发供应商向后进行切换图片

效果二：

软件定制开发供应商这种效果比第一种效果简单，软件定制开发供应商只要删除一些代码和修软件定制开发供应商改一些样式即可。

实现原理

软件定制开发供应商轮播图整体是放在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>