这里是css样式
* {margin: 0;padding: 0;}ul,li {list-style: none;}img {display: block;/*vertical-align: middle;*/}a {text-decoration: none;}input {outline: none;}.clearFix:after {content: "";display: table;clear: both;}#box {position: relative;width: 500px;height: 300px;margin: 50px auto;overflow: hidden;}#box .imglist {position: absolute;left: -500px;top: 0;width: 3500px;height: 300px;}#box .imglist li {float: left;width: 500px;height: 300px;}#box .imglist li img {width: 500px;height: 300px;}#box span {position: absolute;top: 50%;transform: translateY(-50%);width: 25px;height: 50px;background-color: rgba(200, 200, 200, 0.7);font-size: 20px;text-align: center;line-height: 50px;color: white;opacity: 0;transition: opacity 1s;}#box .left {left: 0;}#box .right {right: 0;}#box .btnlist {position: absolute;left: 50%;transform: translateX(-50%);bottom: 10px;overflow: hidden;}#box .btnlist li {float: left;width: 10px;height: 10px;margin-right: 10px;border-radius: 50%;background-color: gray;}#box .btnlist li.current {background-color: red;}
这里是body里的div，我的图片都是宽500px的，你也可以改其尺寸的，不过相应的js代码也要更改
<div id="box"><ul class="imglist"><li><img src="images/yaya5.jpg" /></li><li><img src="images/yaya1.jpg" /></li><li><img src="images/yaya2.jpg" /></li><li><img src="images/yaya3.jpg" /></li><li><img src="images/yaya4.jpg" /></li><li><img src="images/yaya5.jpg" /></li><li><img src="images/yaya1.jpg" /></li></ul><span class="left"> < </span><span class="right"> > </span><ul class="btnlist"><li class="current"></li><li></li><li></li><li></li><li></li></ul></div>
这里是js代码,代码大部分地方都做了注释
// 元素对象var left = document.querySelector(".left");var right = document.querySelector(".right");var imglist = document.querySelector(".imglist");var box = document.querySelector("#box");var dots = document.querySelectorAll(".btnlist li");// 变量区var imgWidth = 500; //图片的宽度var time = 500; //切换一张图片耗费的时间var steps = 50; //步数var interval = 10; //定时任务的时间间隔var current_red = 0;// isMoving变量用于判断当前是否正在切图中var isMoving = false;// 自动轮播定时任务的id值var autoId;// 鼠标移入时显示左右箭头，移出时隐藏左右箭头box.addEventListener("mouseenter", function (e) {left.style.opacity = 1;right.style.opacity = 1;// 鼠标移入到box时停止轮播clearInterval(autoId);});box.addEventListener("mouseleave", function (e) {left.style.opacity = 0;right.style.opacity = 0;// 鼠标移出box时开启自动轮播autoMove();});// 对左右箭头设置点击事件function move(e, direction) {// isMoving为true时表示正在切换图片，不能再执行move函数的代码if (isMoving) {return;}isMoving = true;// 获取当前imglist的位置var start_x = imglist.offsetLeft;var end_x;// 判断direction的数据类型if (typeof direction === "number") {end_x = direction;var delta_x = end_x - start_x;} else {// 通过点击的箭头确定图片移动的距离var delta_x = direction === "left" ? imgWidth : -imgWidth;// 计算要移动到的位置end_x = start_x + delta_x;}// 计算每一步移动的距离var step_dis = delta_x / steps;var next_inter_id = setInterval(function () {var current_x = imglist.offsetLeft;current_x += step_dis;imglist.style.left = current_x + "px";// 条件成立表示完成了此次图片的切换，清除定时器if (current_x === end_x) {// current_x等于0表示此时显示的是位置上的第一张图片(第一个li)，我们要切换到倒数第二张去。if (current_x === 0) {imglist.style.left = -2500 + "px";// current_x等于-3000表示此时显示的是位置上的最后一张(第七个li),我们要切换到第二张图片去。} else if (current_x === -3000) {imglist.style.left = -500 + "px";}clearInterval(next_inter_id);// 图片切换完成时切换小圆点,传入的参数是此时imglist的left属性的值changeDots(current_x);// 图片切换完成，可以继续点击箭头或小圆点切图了isMoving = false;}}, interval);}right.addEventListener("click", function (e) {move(e, "right");});left.addEventListener("click", function (e) {move(e, "left");});/* 无限循环的实现思路：在首尾各添加一张图片，首部添加第五张图片，尾部添加第一张图片1、改变imglist的宽度2、改变imglist元素中left的值3、在添加两张图片后，轮播到第一张和最后一张时实现切换。*/// 小圆点的切换function changeDots(current_x) {/* current_x可能的取值：0 -500 -1000 -1500 -2000 -2500 -3000除以-500：0 1234 5 6 整体减去1：-1 0123 4 5*/var index = current_x / -500 - 1;index = index === -1 ? 4 : index === 5 ? 0 : index;// console.log(index);// 把上一个小圆点红色背景清除dots[current_red].className = "";// 把当前切换到的图片对应的小圆点添加红色背景dots[index].className = "current";// 将当前红色背景的小圆点的索引赋值给current_red变量current_red = index;}// 小圆点的点击事件for (var i = 0; i < dots.length; i++) {dots[i].setAttribute("data-index", i);dots[i].onclick = function (e) {var index = this.dataset.index;// 计算图片要切换到的目标位置var target_pos = -imgWidth * (Number(index) + 1);// 利用现有的move函数完成点击小圆点图片的切换move(e, target_pos);};}// 实现自动轮播function autoMove() {autoId = setInterval(function () {move("right");}, 3000);}autoMove();
