<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { padding: 0; margin: 0; list-style: none; border: 0; } .all { width: 500px; height: 200px; padding: 7px; border: 1px solid #ccc; margin: 100px auto; position: relative; } .screen { width: 500px; height: 200px; position: relative; overflow: hidden; } .screen li { width: 500px; height: 200px; overflow: hidden; float: left; } .screen ul { position: absolute; left: 0; top: 0px; width: 3000px; } .all ol { position: absolute; right: 10px; bottom: 10px; line-height: 20px; text-align: center; } .all ol li { float: left; width: 20px; height: 20px; background: #fff; border: 1px solid #ccc; margin-left: 10px; cursor: pointer; } .all ol li.current { background: #DB192A; } #arr { display: none; } #arr span { width: 40px; height: 40px; position: absolute; left: 5px; top: 50%; margin-top: -20px; background: #000; cursor: pointer; line-height: 40px; text-align: center; font-weight: bold; font-family: '黑体'; font-size: 30px; color: #fff; opacity: 0.3; border: 1px solid #fff; } #arr #right { right: 5px; left: auto; } </style> </head> <body> <div class="all" id='box'> <div class="screen"><!--相框--> <ul> <li><img src="images/1.jpg" width="500" height="200"/></li> <li><img src="images/2.jpg" width="500" height="200"/></li> <li><img src="images/3.jpg" width="500" height="200"/></li> <li><img src="images/small.png" width="500" height="200"/></li> <li><img src="images/5.jpg" width="500" height="200"/></li> </ul> <ol> </ol> </div> <div id="arr"><span id="left"><</span><span id="right">></span></div> </div> <script> function my$(id) { return document.getElementById(id); } //获取最外层div let box = my$("box"); //获取 相框 screen let screen = box.children[0]; let screenWidth = screen.offsetWidth; //获取ul let ulObj = screen.children[0]; //获取ul中所有的div let liList = ulObj.children; //左右点击箭头的显示 let arr = my$("arr"); //设置ol let olObj = document.getElementsByTagName("ol")[0]; let pos = 0; for (let i = 0; i < liList.length; i++) { let liObj = document.createElement("li"); olObj.appendChild(liObj); liObj.innerText = i + (1); //在每个ol中的li标签上添加一个自定义属性,存储索引值 liObj.setAttribute("index", i); liObj.onmouseover = function () { for (let j = 0; j < olObj.children.length; j++) { olObj.children[j].removeAttribute("class"); } //设置当前鼠标进来的li的背景颜色 liObj.className = "current"; pos = liObj.getAttribute("index"); animate(ulObj, -pos * screenWidth); } } olObj.children[0].className = 'current'; //设置任意的一个元素,移动到指定的目标位置 function animate(element, target) { clearInterval(element.timeId); element.timeId = setInterval(function () { //获取当前元素的位置 let current = element.offsetLeft; //设置每次移动的距离 let step = 10; step = current < target ? step : -step; //设置当前移动到的位置 current += step; if (Math.abs(current - target) > Math.abs(step)) { element.style.left = current + "px"; } else { //清理定时器 clearInterval(element.timeId); //直接到达目标 element.style.left = target + "px"; } }, 10) } ulObj.appendChild(ulObj.children[0].cloneNode(true)); my$("right").onclick = clickHandle; function clickHandle() { if (pos >= ulObj.children.length - 1) { pos = 0; ulObj.style.left = -pos * screenWidth + "px"; } pos++; animate(ulObj, -pos * screenWidth); if (pos == ulObj.children.length - 1) { olObj.children[pos - 1].removeAttribute("class"); olObj.children[0].className = "current"; } else { for (let j = 0; j < olObj.children.length; j++) { olObj.children[j].removeAttribute("class"); } olObj.children[pos].className = "current"; } } window.timeId = setInterval(clickHandle, 1000); my$("left").onclick = function () { if (pos <= 0) { pos = ulObj.children.length - 1; ulObj.style.left = -pos * screenWidth + "px"; } pos--; animate(ulObj, -pos * screenWidth); for (let j = 0; j < olObj.children.length; j++) { olObj.children[j].removeAttribute("class"); } olObj.children[pos].className = "current"; }; //鼠标进入事件 box.onmouseover = function () { arr.style.display = "block" clearInterval(timeId); }; //鼠标离开事件 box.onmouseout = function () { arr.style.display = "none" window.timeId = setInterval(clickHandle, 1000); } </script> </body> </html>