JS来实现轮播图（走马灯）可左右切换图片，鼠标移入会停止轮播 |
您所在的位置：网站首页 › setinterval轮播图 › JS来实现轮播图（走马灯）可左右切换图片，鼠标移入会停止轮播 |
JS来实现轮播图（走马灯）可左右切换图片，鼠标移入会停止轮播
|
效果一：
会自动进行轮播，当鼠标进入轮播图区域会停止轮播，点击左右箭头可以向前、向后进行切换图片
这种效果比第一种效果简单，只要删除一些代码和修改一些样式即可。 实现原理轮播图整体是放在ul里的，li里存放img图片（轮播的图片） 给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.先设置整体样式。 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; }2.然后只在body里只写一个ul，li 和 img 都直接在js中循环创建 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 |
【本文地址】
今日新闻 |
推荐新闻 |