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"><title>幻灯片轮播图</title><!-- 引入当前页面的样式表 --><link rel="stylesheet" href="./Micss/Lunbo.css"><!-- 引入重置样式表 --><link rel="stylesheet" href="./Micss/reset.css"><!-- 引入js文件 --><script src="./js/Lu.js"></script></head><body><!-- 轮播图容器 --><div class="slideshow"><ul class="mySlides clearfix"><li class="sideItem slideActive fade"><a href="javascript:;"><img src="./img/img.jpg"></a></li><li class="sideItem fade"><a href="javascript:;"><img src="./img/img2.jpg"></a></li><li class="sideItem fade"><a href="javascript:;"><img src="./img/img3.jpg"></a></li></ul><div class="prev">❮</div><div class="next">❯</div><nav class="navHover"><ul><li class="dot dotActive"></li><li class="dot"></li><li class="dot"></li></ul></nav></div></body></html>
CSS代码（Lunbo.css):
* {box-sizing: border-box}body {font-family: Verdana, sans-serif;}.sideItem {position: absolute;}.slideActive {z-index: 99;display: block;}/* 幻灯片容器 */.slideshow {max-width: 1000px;position: relative;margin: 100px auto;}/* 下一张 & 上一张 按钮 */.prev,.next {z-index: 100;cursor: pointer;position: absolute;margin-top: 138px;width: auto;padding: 16px;color: white;font-weight: bold;font-size: 18px;transition: 0.6s ease;border-radius: 0 3px 3px 0;}/* 定位 "下一张" 按钮靠右 */.next {right: 0;border-radius: 3px 0 0 3px;}/* 上一张和下一张的鼠标移上效果 */.prev:hover,.next:hover {background-color: rgba(0, 0, 0, 0.8);}/* 导航元素所在的nav设置 */.navHover {position: absolute;z-index: 100;right: 455px;bottom: -340px;}/* 导航圆点设置 */.dot {width: 13px;height: 13px;border: 2px solid rgb(187, 187, 187);border-radius: 50%;background-color: rgba(0, 0, 0, .4);float: left;margin: 0 4px;cursor: pointer;right: 0;}/* 导航圆点鼠标移上显示设置 */.dot:hover {border: 2px solid rgba(0, 0, 0, .4);background-color: rgb(187, 187, 187);}.dotActive {border: 2px solid rgba(0, 0, 0, .4);background-color: rgb(187, 187, 187);}/* 淡出动画 */.fade {-webkit-animation-name: fade;-webkit-animation-duration: 1.5s;animation-name: fade;animation-duration: 1.5s;}@-webkit-keyframes fade {from {opacity: .4}to {opacity: 1}}@keyframes fade {from {opacity: .4}to {opacity: 1}}
JavaScript代码（Lu.js）:
window.onload = function () {var slideIndex = 1;showSlides(slideIndex);let prev = document.getElementsByClassName('prev')[0];let next = document.getElementsByClassName('next')[0];let navs = document.getElementsByClassName('dot');// 上一张点击事件prev.addEventListener('click', function () {plusSlides(-1);});// 下一张点击事件next.addEventListener('click', function () {plusSlides(1);});for (let i = 1; i <= navs.length; i++) {navs[i - 1].addEventListener('click', function () {currentSlide(i);});}function currentSlide(n) {clearTimeout(timeout);showSlides(slideIndex = n);}function plusSlides(n) {clearTimeout(timeout);showSlides(slideIndex += n - 1);}function showSlides(n) {var i;let imgs = document.getElementsByClassName('sideItem');let navs = document.getElementsByClassName('dot');if (n > imgs.length) { slideIndex = 1; }if (n < 1) { slideIndex = imgs.length; }for (i = 0; i < imgs.length; i++) {imgs[i].classList.remove("slideActive")//移出slideActive类}for (i = 0; i < navs.length; i++) {navs[i].classList.remove("dotActive");}imgs[slideIndex - 1].classList.add("slideActive");//增加slideActive类navs[slideIndex - 1].classList.add("dotActive");//增加dotActive类timeout = setTimeout(showSlides, 2000); // 切换时间为 2 秒slideIndex++;if (slideIndex > imgs.length) {slideIndex = 1;}return timeout;}}
幻灯片练习所需图片：
img.jpg
img2.jpg
img3.jpg
