javascript 幻灯片代码(含自动播放)
HTML
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>
css
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 }
JS
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 }
