效果视频：
20201022-115002
完整的html/css和js如下，新建.css和.html和.js文件后把对应的代码复制粘贴到对应文件中，双击.html文件即可看到效果（如果图片无法打开可以修改js中存储图片的list数组）
html:
<!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" /> <link rel="stylesheet" href="./index.css"> <title>轮播</title> </head> <body> <div id="app"> </div> <script src="./index.js"> </script> </body> </html>css:
.box { width: 1200px; height: 200px; border-radius: 4px; overflow: hidden; position: relative; margin: 0 auto; } .carousel-ul { display: flex; list-style: none; margin: 0; padding: 0; } .carousel-ul li.show-pointer { cursor: pointer; } .carousel-ul li img { display: block; width: 1200px; height: 200px; } /* 轮播指示器 */ .carousel-indicators-ul { position: absolute; bottom: 5px; left: 50%; } .carousel-indicators-ul li { width: 38px; height: 26px; display: flex; justify-content: center; align-items: center; cursor: pointer; opacity: 0.5; } .carousel-indicators-ul li>div { width: 30px; height: 2px; background-color: #fff; }js:
// 广告 const announcement = (list) => { let lis = getLis(list) let indicators = getIndicators(list) let announcement = document.createElement("div") announcement.className = 'box' announcement.innerHTML = ` <ul class="carousel-ul"> ${lis} </ul> <ul class="carousel-indicators-ul" style="marginLeft:-${38 * list.length / 2};display:${list.length > 1 ? 'flex' : 'none'}"> ${indicators} </ul> ` document.body.appendChild(announcement) list.length > 1 ? addCarouselEvent(list) : ''; let carouselItems = document.getElementsByClassName("carousel-ul")[0].getElementsByTagName('li') for (let i = 0; i < carouselItems.length; i++) { carouselItems[i].addEventListener("click", () => { if (list[i].link) { window.open(list[i].link) } }) } } const getLis = (list) => { let lis = `` for (let i = 0; i < list.length; i++) { lis += ` <li class="${list[i].link?'show-pointer':''}"> <img src="${list[i].imageUrl}" /> </li> ` } return lis } const getIndicators = (list) => { let lis = '' for (let i = 0; i < list.length; i++) { lis += ` <li> <div></div> </li> ` } return lis } const addCarouselEvent = (list) => { const carouselWidth = 1200 let carouselUl = document.getElementsByClassName("carousel-ul")[0] let indicatorLis = list.length > 1 ? document.getElementsByClassName("carousel-indicators-ul")[0].getElementsByTagName("li") : '' let carouselLis = carouselUl.getElementsByTagName("li") let left = 0 let timer = '' run() function run() { let time; if (left % carouselWidth == 0) { time = 3000 let ind = left === 0 ? 0 : (-left / carouselWidth) ind = ind === indicatorLis.length ? 0 : ind for (let i = 0; i < indicatorLis.length; i++) { if (i === ind) { indicatorLis[i].style.opacity = 1 } else { indicatorLis[i].style.opacity = 0.5 } } } else { time = 10 } let maxLeft = -(carouselWidth * list.length) if (left <= maxLeft) { left = 0 } carouselUl.style.marginLeft = left + 'px' timer = setTimeout(() => { left -= 200 run() }, time) } for (let i = 0; i < carouselLis.length; i++) { // 鼠标移入 carouselLis[i].onmouseover = () => { clearTimeout(timer) left = -i * carouselWidth carouselUl.style.marginLeft = left + 'px' }; // 鼠标移出 carouselLis[i].onmouseout = () => { run() } } for (let j = 0; j < indicatorLis.length; j++) { indicatorLis[j].onmouseover = () => { clearTimeout(timer) left = -j * carouselWidth carouselUl.style.marginLeft = left + 'px' for (let k = 0; k < indicatorLis.length; k++) { indicatorLis[k].style.opacity = k === j ? 1 : 0.5 } } } } let list = [ { link: 'https://www.baidu.com', imageUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fdd30e55069adb64bb354d4f8d9f9b60.jpg?w=2452&h=920' }, { link: 'https://www.baidu.com', imageUrl: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/10aac533af4489c077bc6a8e15219e3b.jpg?thumb=1&w=1226&h=460&f=webp&q=90' } ] announcement(list)