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

全栈程序员-用户IM • 2022年7月4日下午12:00 • 未分类

大家好，又见面了，我是你们的朋友全栈君。

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 }

 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 }