幻灯片轮播图（含自动播放和手动点击播放，代码易懂）
生活随笔
收集整理的這篇文章主要介紹了
幻灯片轮播图（含自动播放和手动点击播放，代码易懂）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?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
?
總結
以上是生活随笔為你收集整理的幻灯片轮播图（含自动播放和手动点击播放，代码易懂）的全部內容，希望文章能夠幫你解決所遇到的問題。
