javascript 幻灯片自动播放代码

源码部分

对应的图片地址改为自己的图片地址：

HTML 代码：

<div class="slideshow-container"><div class="mySlides fade">  <div class="numbertext">1 / 3</div>  <img src="img1.jpg" style="width:100%">  <div class="text">文本 1</div></div><div class="mySlides fade">  <div class="numbertext">2 / 3</div>  <img src="img2.jpg" style="width:100%">  <div class="text">文本 2</div></div><div class="mySlides fade">  <div class="numbertext">3 / 3</div>  <img src="img3.jpg" style="width:100%">  <div class="text">文本 3</div></div><a class="prev" onclick="plusSlides(-1)"></a><a class="next" onclick="plusSlides(1)"></a>
</div>
<br>
<div style="text-align:center"><span class="dot" onclick="currentSlide(1)"></span> <span class="dot" onclick="currentSlide(2)"></span> <span class="dot" onclick="currentSlide(3)"></span> 
</div>


CSS 代码设置上一张下一张图片的按钮及文本。

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;
}
/* 定位 "下一张" 按钮靠右 */
.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;
}
/* 数字文本 (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%;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}
}





JavaScript 代码：

var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {showSlides(slideIndex += n);
}
function currentSlide(n) {showSlides(slideIndex = n);
}
function showSlides(n) {var i;var slides = document.getElementsByClassName("mySlides");var dots = document.getElementsByClassName("dot");if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length}for (i = 0; i < slides.length; i++) {    slides[i].style.display = "none"; }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";
}



在线演示


你也可以将幻灯片设置为自动播放，JavaScript 代码修改为如下：

JavaScript 代码：

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", "");  }  slides[slideIndex-1].style.display = "block";    dots[slideIndex-1].className += " active";  setTimeout(showSlides, 2000); // 切换时间为 2 秒
}


在线演示

                        
                        
下一节：CSS 日历样式示例代码
程序设计
以下是一个简单的 CSS 日历代码：HTML 代码：<h1>CSS 日历</h1><div class="month">  <ul>  <li class="p ...