只是实现了原生JS实现轮播图的逻辑和具体实现代码，css样式并未进行美化
实现了以下功能
(1) 点击容器container下方小圆点可以进行切换
(2) 点击左右的按钮可以进行切换
(3) 自动轮播图片
(4) 鼠标放上去暂停定时器，鼠标移出重新开启定时器
具体代码实现如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * { padding: 0; margin: 0; box-sizing: border-box; } body { margin: 300px; } .container { width: 600px; height: 300px; position: relative; } .content-list { width: 600px; height: 300px; position: relative; transition: all 0.9s; } .item { width: 100%; height: 100%; list-style: none; position: absolute; left: 0; top: 0; opacity: 0; } .item:nth-child(1) { background-color: red; } .item:nth-child(2) { background-color: green; } .item:nth-child(3) { background-color: blue; } .item:nth-child(4) { background-color: black; } .active { opacity: 1; } .order { position: absolute; left: 50%; transform: translateX(-50%); bottom: 10px; display: flex; } .item1 { width: 20px; height: 20px; margin-right: 10px; border-radius: 50%; background-color: white; list-style: none; } .item1Active { background: purple; } button { width: 20px; height: 30px; } .showBtn { display: block; } .hideBtn { display: none; } #leftBtn { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); } #rightBtn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); } </style> </head> <body> <div class="container"> <ul class="content-list"> <li class="item active"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> </ul> <ul class="order"> <li class="item1 item1Active">1</li> <li class="item1">2</li> <li class="item1">3</li> <li class="item1">4</li> </ul> <button id="leftBtn" class="hideBtn"><</button> <button id="rightBtn" class="hideBtn">></button> </div> <script> let container = document.querySelector('.container'); let items = document.querySelectorAll('.item'); let item1s = document.querySelectorAll('.item1'); let leftBtn = document.querySelector('#leftBtn'); let rightBtn = document.querySelector('#rightBtn'); // 当前索引index let index = 0; function changeIndex() { for (let i = 0; i < items.length; i++) { items[i].classList.remove('active'); item1s[i].classList.remove('item1Active'); } items[index].classList.add('active'); item1s[index].classList.add('item1Active'); } function goLeft() { if (index > 0) { index--; } else { index = 3; } changeIndex(); } function goRight() { if (index < 3) { index++; } else { index = 0; } changeIndex(); } // 给左按钮和右按钮绑定点击事件,达到轮播图切换的效果 leftBtn.addEventListener('click', goLeft); rightBtn.addEventListener('click', goRight); // 给底部小圆点增加自定义属性index,标记为索引,方便为小圆点绑定点击事件 for (let i = 0; i < item1s.length; i++) { item1s[i].addEventListener('click', function () { index = i; changeIndex(); }); } // 声明定时器，达到轮播图自动向后切换的效果 let timer; timer = setInterval(() => { goRight(); }, 2000); // 鼠标移到当前容器触发的事件，两个按钮显示，关闭定时器 container.addEventListener('mouseover', function () { leftBtn.className = 'showBtn'; rightBtn.className = 'showBtn'; // 暂停定时器 clearInterval(timer); }); // 鼠标离开当前容器触发的事件，两个按钮隐藏，重新开启定时器 container.addEventListener('mouseleave', function () { leftBtn.className = 'hideBtn'; rightBtn.className = 'hideBtn'; // 再次打开定时器 timer = setInterval(() => { goRight(); }, 2000); }); </script> </body> </html>
达到的效果图如下
