當前位置：
首頁 >
JS 幻灯片代码(含自动播放)
發(fā)布時間：2023/12/10
41
豆豆
生活随笔
收集整理的這篇文章主要介紹了
JS 幻灯片代码(含自动播放)
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
實現(xiàn)幻燈片自動播放（沒有上一張下一張功能）
HTML代碼（把圖片改一下就行）
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="1.css"> </head> <body><div class="slideshow-container"><div class="mySlides fade"><div class="numbertext">1 / 3</div><img src="../images/img1.jpg" style="width:100%"><div class="text">文本 1</div></div><div class="mySlides fade"><div class="numbertext">2 / 3</div><img src="../images/img2.jpg" style="width:100%"><div class="text">文本 2</div></div><div class="mySlides fade"><div class="numbertext">3 / 3</div><img src="../images/img3.jpg" style="width:100%"><div class="text">文本 3</div></div></div><br><div style="text-align:center"><span class="dot"></span><span class="dot"></span><span class="dot"></span></div><script src="1.js"></script> </body> </html>CSS代碼
* {box-sizing: border-box; }body {font-family: Verdana, sans-serif; }.mySlides {display: none; }/* 幻燈片容器 */ .slideshow-container {max-width: 1000px; /* 設(shè)置最大寬度 */position: relative;margin: auto; }/* 標題文本 */ .text {color: #f2f2f2;font-size: 15px;padding: 8px 12px;position: absolute;bottom: 8px;width: 100%;text-align: center; }/* 數(shù)字文本 (1/3 等) */ .numbertext {color: #f2f2f2;font-size: 12px;padding: 8px 12px;position: absolute;top: 0px; }/* 標記符號 */ .dot {cursor: pointer;height: 13px;width: 13px;margin: 0 2px;background-color: #bbb;border-radius: 50%;display: inline-block; /* 使其既具有block的寬度高度特性又具有inline的同行特性 */transition: background-color 0.6s ease; /* CSS3 過渡 */ }.active, .dot:hover {background-color: #717171; }/* 淡出動畫 */ .fade {-webkit-animation-name: fade; /* Safari 和 Chrome */-webkit-animation-duration: 1.5s; /* Safari 和 Chrome */animation-name: fade; /* 必須定義動畫的名稱和動畫的持續(xù)時間。*/ animation-duration: 1.5s; /* 如果省略持續(xù)時間，動畫將無法運行，因為默認值是0 */ }@-webkit-keyframes fade { /* Safari 和 Chrome */from { opacity: .4 } /* opacity 屬性 透明度級別 */to { opacity: 1 } }@keyframes fade { /* opacity???? 明天看 */from { opacity: .4}to {opacity: 1} }JS代碼
var slideIndex = 0; showSlides();function showSlides() {var i;var slides = document.getElementsByClassName("mySlides");var dots = document.getElementsByClassName("dot");for (i = 0; i < slides.length; i++) {slides[i].style.display = "none";}slideIndex++;if (slideIndex > slides.length) {slideIndex = 1}for (i = 0; i < dots.length; i++) {dots[i].className = dots[i].className.replace(" active", ""); /* replace如果沒找到的話 返回原字符 */}slides[slideIndex - 1].style.display = "block";dots[slideIndex - 1].className += " active";setTimeout("showSlides()", 2000); // 切換時間為 2 秒 }實現(xiàn)幻燈片自動播放（同時添加了上一張下一張按鈕功能和點選）
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>Document</title><link rel="stylesheet" href="2.css" type="text/css"> </head> <body><div class="slideshow-container"><div class="mySlides fade"><div class="numbertext">1 / 3</div><img src="../images/img1.jpg" style="width:100%"><div class="text">文本 1</div></div><div class="mySlides fade"><div class="numbertext">2 / 3</div><img src="../images/img2.jpg" style="width:100%"><div class="text">文本 2</div></div><div class="mySlides fade"><div class="numbertext">3 / 3</div><img src="../images/img3.jpg" style="width:100%"><div class="text">文本 3</div></div><a class="prev" onclick="plusSlides(-2)">?</a> <!-- 這里-2是因為slideIndex++; --><a class="next" onclick="plusSlides(0)">?</a> <!-- 這里 0是因為slideIndex++;--></div><br><div style="text-align:center"><span class="dot" onclick="currentSlide(0)"></span> <span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> </div><script src="2.js"></script> </body> </html>CSS代碼
* {box-sizing:border-box} body {font-family: Verdana,sans-serif;} .mySlides {display:none}/* 幻燈片容器 */ .slideshow-container {max-width: 1000px;position: relative;margin: auto; }/* 下一張 & 上一張 按鈕 */ .prev, .next {cursor: pointer;position: absolute;top: 50%;width: auto;margin-top: -22px;padding: 16px;color: white;font-weight: bold;font-size: 18px;transition: 0.6s ease;border-radius: 0 3px 3px 0; /* 左側(cè)按鈕的圓角邊框 右上角和右下角 */ }/* 定位 "下一張" 按鈕靠右 以及右側(cè)按鈕的圓角邊框 左上角和左下角*/ .next {right: 0;border-radius: 3px 0 0 3px; }/* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover {background-color: rgba(0,0,0,0.8); }/* 標題文本 */ .text {color: #f2f2f2;font-size: 15px;padding: 8px 12px;position: absolute;bottom: 8px;width: 100%;text-align: center; }/* 數(shù)字文本 (1/3 等) */ .numbertext {color: #f2f2f2;font-size: 12px;padding: 8px 12px;position: absolute;top: 0; }/* 標記符號 */ .dot {cursor:pointer;height: 13px;width: 13px;margin: 0 2px;background-color: #bbb;border-radius: 50%; /* 實現(xiàn)圓形 */display: inline-block;transition: background-color 0.6s ease; }.active, .dot:hover {background-color: #717171; }/* 淡出動畫 */ .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} }JS代碼
var slideIndex = 0; var t; showSlides(slideIndex);function plusSlides(n) {showSlides(slideIndex += n); }function currentSlide(n) {showSlides(slideIndex = n); }function showSlides(n) {clearTimeout(t);var i;var slides = document.getElementsByClassName("mySlides");var dots = document.getElementsByClassName("dot");if (n > slides.length) {slideIndex = 0} /* 這里設(shè)置為slideInde=0 因為后面slideIndex++; */if (n < 0) {slideIndex = slides.length-1} /* 這里是slides.length-1因為后面slideIndex++; */for (i = 0; i < slides.length; i++) {slides[i].style.display = "none"; }/* 自動播放設(shè)置變量自增 */slideIndex++;if (slideIndex > slides.length) {slideIndex = 1; /* 這里不能設(shè)置slideInde=0 設(shè)置為1 因為后面slideIndex沒有++ */}for (i = 0; i < dots.length; i++) {dots[i].className = dots[i].className.replace(" active", "");}slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active";t = setTimeout("showSlides(slideIndex)", 3000); // 切換時間為 2 秒 }總結(jié)
以上是生活随笔為你收集整理的JS 幻灯片代码(含自动播放)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java numa_Java只使用2个C
- 下一篇： .NET平台功能最强大，性能最佳的JSO