需求:
- 鼠标移动到下标页码时,也转换到相对应的图片;
- 多张图片可以自动轮播;
- 鼠标移动至图片时,停止自动轮播;
- 可以手动左右调节;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>原生JS轮播图</title> <style> *{ margin: 0; padding: 0; } .outer{ position: relative; top: 20px; cursor: pointer; } .outer .img-box .img-item { display: none; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } .active{ display: block !important; } .outer ul{ position: absolute; top: 250px; left: 50%; transform: translateX(-50%); text-align: center; } .outer ul li.page-number{ list-style-type: none; display: inline-block; color: black; margin: 0 6px; font-size: 12px; width: 20px; height: 20px; background-color: #05dfff; line-height: 20px; text-align: center; border-radius: 50%; } .page-active{ background-color: #0000FF !important; } .outer .mover{ position: absolute; top: 110px; left: 50%; height: 60px; width: 40px; background-color: rgba(255,255,255,0.65); line-height: 60px; text-align: center; font-size: 26px; display: none; user-select: none; /*用户点击时,内容不能被选中*/ } .outer .leftMover{ margin-left: -260px; } .outer .rightMover{ margin-left: 220px; } </style> </head> <body> <div id="outer" class="outer"> <div class="img-box"> <img src="../img/1.jpg" class="img-item active"> <img src="../img/2.jpg" class="img-item"> <img src="../img/3.jpg" class="img-item"> <img src="../img/4.jpg" class="img-item"> </div> <ul> <li class="page-number page-active">1</li> <li class="page-number">2</li> <li class="page-number">3</li> <li class="page-number">4</li> </ul> <a id="leftMover" class="mover leftMover"><</a> <a id="rightMover" class="mover rightMover">></a> </div> <script> var objectImgItems = document.getElementsByClassName("img-item"); var objectRowItems = document.getElementsByClassName("page-number"); var objectOuter = document.getElementById("outer"); var objectMover = document.getElementsByClassName("mover"); var objectLeftMover = document.getElementById("leftMover"); var objectRightMover = document.getElementById("rightMover"); <!-- 获取node在nodeList中的索引值 --> function getIndex(node, nodeList) { for (var index=0; index<nodeList.length; index++){ if (nodeList[index] === node){ return index } } } <!-- 根据传入的页码索引值,转换图片和页码 --> function move(numberIndex) { for (var i=0; i<objectImgItems.length; i++){ if (i === numberIndex) { objectImgItems[i].classList.add("active"); objectRowItems[i].classList.add("page-active"); } else { objectImgItems[i].classList.remove("active"); objectRowItems[i].classList.remove("page-active"); } } } <!-- 鼠标覆盖页码时,图片和页码进行转换 --> for (var i=0; i<objectRowItems.length; i++){ objectRowItems[i].onmouseover = function () { var numberIndex = getIndex(this, objectRowItems); move(numberIndex); pageNumber = numberIndex; }; } <!-- 鼠标移动到整个模块,则显示左右移动的图标,图片停止自动转换 --> objectOuter.onmouseover = function () { clearInterval(intervalId); for (var i=0; i<objectMover.length; i++){ objectMover[i].classList.add("active"); } }; <!-- 鼠标离开整个模块,则隐藏左右移动的图标,图片开始自动转换 --> objectOuter.onmouseout = function () { intervalId = setInterval(directionMove, 2000); for (var i=0; i<objectMover.length; i++){ objectMover[i].classList.remove("active"); } }; <!-- 添加页码变量,通过自增、自减,实现左右转换 --> var pageNumber = 0; function directionMove(isLeft) { if (isLeft){ if (pageNumber === 0) { pageNumber = 4; } pageNumber--; } else { if (pageNumber === 3) { pageNumber = -1; } pageNumber++; } move(pageNumber); } <!-- 添加定时器,实现自动转换 --> var intervalId = setInterval(directionMove, 2000); <!-- 右转换 --> objectRightMover.onclick = function () { directionMove(); }; <!-- 左转换 --> objectLeftMover.onclick = function () { directionMove(true); } </script> </body> </html>