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和scalefor (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.获取ulvar 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和scalefor (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>