javascript 幻灯片代码(含自动播放)「建议收藏」

 1 <div class="slideshow-container">  2 <div class="mySlides fade">  3 <div class="numbertext">1 / 3</div>  4 <img src="https://c.runoob.com/wp-content/uploads/2017/01/img_mountains_wide.jpg" style="width:100%">  5 <div class="text">文本 1</div>  6 </div>  7  8 <div class="mySlides fade">  9 <div class="numbertext">2 / 3</div> 10 <img src="https://c.runoob.com/wp-content/uploads/2017/01/img_fjords_wide.jpg" style="width:100%"> 11 <div class="text">文本 2</div> 12 </div> 13 14 <div class="mySlides fade"> 15 <div class="numbertext">3 / 3</div> 16 <img src="https://c.runoob.com/wp-content/uploads/2017/01/img_nature_wide.jpg" style="width:100%"> 17 <div class="text">文本 3</div> 18 </div> 19 20 </div> 21 <br> 22 23 <div style="text-align:center"> 24 <span class="dot"></span> 25 <span class="dot"></span> 26 <span class="dot"></span> 27 </div>

 1 * {box-sizing:border-box}  2 body {font-family: Verdana,sans-serif;}  3 .mySlides {display:none}  4 /* 幻灯片容器 */  5 .slideshow-container {  6  max-width: 1000px;  7  position: relative;  8  margin: auto;  9 } 10 11 /* 下一张 & 上一张 按钮 */ 12 .prev, .next { 13  cursor: pointer; 14  position: absolute; 15  top: 50%; 16  width: auto; 17  margin-top: -22px; 18  padding: 16px; 19  color: white; 20  font-weight: bold; 21  font-size: 18px; 22  transition: 0.6s ease; 23  border-radius: 0 3px 3px 0; 24 } 25 26 /* 定位 "下一张" 按钮靠右 */ 27 .next { 28  right: 0; 29  border-radius: 3px 0 0 3px; 30 } 31 32 /* On hover, add a black background color with a little bit see-through */ 33 .prev:hover, .next:hover { 34  background-color: rgba(0,0,0,0.8); 35 } 36 37 /* 标题文本 */ 38 .text { 39  color: #f2f2f2; 40  font-size: 15px; 41  padding: 8px 12px; 42  position: absolute; 43  bottom: 8px; 44  width: 100%; 45  text-align: center; 46 } 47 48 /* 数字文本 (1/3 等) */ 49 .numbertext { 50  color: #f2f2f2; 51  font-size: 12px; 52  padding: 8px 12px; 53  position: absolute; 54  top: 0; 55 } 56 57 /* 标记符号 */ 58 .dot { 59  cursor:pointer; 60  height: 13px; 61  width: 13px; 62  margin: 0 2px; 63  background-color: #bbb; 64  border-radius: 50%; 65  display: inline-block; 66  transition: background-color 0.6s ease; 67 } 68 69 .active, .dot:hover { 70  background-color: #717171; 71 } 72 73 /* 淡出动画 */ 74 .fade { 75  -webkit-animation-name: fade; 76  -webkit-animation-duration: 1.5s; 77  animation-name: fade; 78  animation-duration: 1.5s; 79 } 80 81 @-webkit-keyframes fade { 82  from {opacity: .4} 83  to {opacity: 1} 84 } 85 86 @keyframes fade { 87  from {opacity: .4} 88  to {opacity: 1} 89 }

 1 var slideIndex = 0;  2 showSlides();  3  4 function showSlides() {  5 var i;  6 var slides = document.getElementsByClassName("mySlides");  7 var dots = document.getElementsByClassName("dot");  8 for (i = 0; i < slides.length; i++) {  9 slides[i].style.display = "none"; 10  } 11 slideIndex++; 12 if (slideIndex > slides.length) {slideIndex = 1} 13 for (i = 0; i < dots.length; i++) { 14 dots[i].className = dots[i].className.replace(" active", ""); 15  } 16 slides[slideIndex-1].style.display = "block"; 17 dots[slideIndex-1].className += " active"; 18 setTimeout(showSlides, 2000); // 切换时间为 2 秒 19 }