较上个版本功能全面,函数模块化,降低联系,bug减少,附上代码:
Html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="./css/main.css"> </head> <body> <div id="box"> <div id="pic_box"></div> <img id="left" src="img/left.png" alt=""> <img id="right" src="img/right.png" alt=""> <ul id="dot_box"></ul> </div> <script src="./js/main.js"> </script> </body> </html>
Css:
* { margin: 0; padding: 0; } #box { margin: 50px auto; width: 960px; height: 320px; background: lightcoral; position: relative; overflow: hidden; } #pic_box { height: 320px; background: lightblue; position: absolute; } #left { position: absolute; top: 130px; left: 10px; } #right { position: absolute; top: 130px; right: 10px; } ul { list-style: none; position: absolute; bottom: 20px; left: 400px; } li { width: 20px; height: 20px; list-style: none; border-radius: 50%; float: left; margin-left: 5px; }
JS:
var box, pic_box, left, right, dot_box, liList; //定义最外面的大盒子,装图片的盒子,左右按键,盒子下面的小点容器,及当前小点容器. var count = 0; //记录当前显示的图片索引 var num = 160; //定时器帧数控制 var direct; //左右方向(方向为左向右移动,反之向左移动)方向是按钮的方向 var bool = false; //控制是否允许轮播 var autoPlay = false; //是否自动轮播 var picurl = ["img/a.jpeg", "img/b.jpeg", "img/c.jpeg", "img/d.jpeg", "img/e.jpeg"]; //图片路径 var piclist = []; //加载的图片(两张) init(); //入口函数 function init() { //获取所有元素并赋值给变量,添加事件 box = document.getElementById("box"); pic_box = document.getElementById("pic_box"); left = document.getElementById("left"); right = document.getElementById("right"); dot_box = document.getElementById("dot_box"); left.addEventListener("click", picChange); //点击左键 right.addEventListener("click", picChange); //点击右键 box.addEventListener("mouseenter", isAuto); //鼠标进入大盒子取消自动轮播 box.addEventListener("mouseleave", isAuto); //鼠标离开大盒子自动轮播 creatImg(); //初始化并加载所有图片 animation(); //开启每帧移动函数 creatDot(); //新建小点(点击切换图片) } function creatImg() { for (var j = 0; j < picurl.length; j++) { //根据图片源新建图片 piclist[j] = new Image(); piclist[j].src = picurl[j]; piclist[j].style.width = "960px"; piclist[j].style.height = "320px"; } pic_box.appendChild(piclist[0]); //初始化装图片的盒子,插入第一张图片 } function picChange(e) { if (bool) return; //若轮播开关为真时,不执行函数,即点击一次后需要等整张图片轮播完才能点击下一次 if (this === left) { //当单击向左按钮 direct = "left"; //将方向改成左 count--; //图片索引减一 if (count === -1) { //当减到-1时,让索引为图片总数减一(数组从零开始) count = picurl.length - 1; } } else if (this === right) { //当单击向右按钮 direct = "right"; //将方向改成右 count++; //图片索引加一 if (count === picurl.length) { //当加到图片总数减一时,让索引为0(数组从零开始) count = 0; } } nextPic(); //创造下一张 } function nextPic() { //加载下一张图片 pic_box.style.width = 960 * 2 + "px"; //初始化位置 if (direct === "right") { //当方向为右时,在图片后面插入下一张图片 pic_box.appendChild(piclist[count]); pic_box.style.left = 0; } else if (direct === "left") { //当方向为左时,在图片前面插入下一张图片 pic_box.insertBefore(piclist[count], pic_box.firstElementChild); pic_box.style.left = -960 + "px"; } bool = true; //图片加载完成后,让控制图片轮播的开关为真,防止图片轮播时执行其他事件 liChange(); //让小点改变 } function animation() { //动画函数,自动轮播和轮播 requestAnimationFrame(animation); picMove(); autoScroll(); } function creatDot() { //新建小点,控制点击切换图片 for (var i = 0; i < picurl.length; i++) { var li = document.createElement("li"); dot_box.appendChild(li); li.style.background = "rgba(255,255,255,0.7)"; } dot_box.firstElementChild.style.background = "rgba(255,255,255,1)"; //默认选中第一个小点 dot_box.addEventListener("click", changeDot); //点击小点触发事件,切换图片 liChange(); } function changeDot(e) { if (bool) return; //若轮播开关为真时,不执行函数,即点击一次后需要等整张图片轮播完才能点击下一次 var list = Array.from(dot_box.children); //将小点放至数组 var index = list.indexOf(e.target); //查找当前的小点 if (index === count) { //若当前点击的图片与索引相等,表示不切换(就是本身) return; } if (index > count) { //当点击的小点在当前右边,将方向换成右 direct = "right"; } else if (index < count) { //当点击的小点在当前左边,将方向换成左 direct = "left"; } count = index; //将当前索引切换成点击的那个 nextPic(); //新建下一张图片 } function liChange() { if (liList) { //前一个小点背景透明 liList.style.backgroundColor = "rgba(255,255,255,0.7)"; } liList = dot_box.children[count]; //将被切换的小点赋值给当前小点,使其根据计数器切换 liList.style.background = "rgba(255,255,255,1)"; } function picMove() { if (!bool) return; //若轮播开关为假时,不执行函数,即点击一次按钮或小点后才能开始轮播 if (direct === "left") { //向右移动 pic_box.style.left = pic_box.offsetLeft + 20 + "px"; //移动速度,每次20px,当移动到0时关闭轮播开关,并将最后一张图删除 if (pic_box.offsetLeft === 0) { bool = false; pic_box.lastElementChild.remove(); } } else if (direct === "right") { //向左移动 pic_box.style.left = pic_box.offsetLeft - 20 + "px"; //移动速度,每次-20px,当移动到-960时关闭轮播开关,并将第一张图删除,重置位置为0 if (pic_box.offsetLeft === -960) { bool = false; pic_box.firstElementChild.remove(); pic_box.style.left = 0; } } } function autoScroll() { //自动轮播 if (!autoPlay) return; //若自动轮播开关为非(鼠标移入时),不自动轮播 num--; //定时器帧数计数器减一,减到0时赋值为160 if (num === 0) { num = 160; direct = "right"; count++; if (count === picurl.length) { count = 0; } nextPic(); } } function isAuto(e) { //鼠标移入时,不自动轮播,反之,自动轮播 if (e.type === "mouseenter") { autoPlay = false; } else if (e.type = "mouseleave") { autoPlay = true; } }