标签：.text 函数名 幻灯片 容器 rom ack chrome point family
源码参考菜鸟教程：<iframe width="100%" height="300" src="https://c.runoob.com/iframe/2037" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
要实现图片自动滚动需要稍微修改一下源码（我怕忘记自己当时怎么修改的，因此记录一下）：
示例代码：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" type = "text/css" href = "testGD.css" > 6 <script src = "testGD.js"></script> 7 <title>JS滚动效果</title> 8 </head> 9 10 <body> 11 12 <div class="slideshow-container"> 13 14 <div class="mySlides fade"> 15 <div class="numbertext">1 / 3</div> 16 <img src="1.jpg" style="width:100%"> 17 <div class="text"></div> 18 </div> 19 20 <div class="mySlides fade"> 21 <div class="numbertext">2 / 3</div> 22 <img src="2.jpg" style="width:100%"> 23 <div class="text"></div> 24 </div> 25 26 <div class="mySlides fade"> 27 <div class="numbertext">3 / 3</div> 28 <img src="3.jpg" style="width:100%"> 29 <div class="text"></div> 30 </div> 31 32 </div> 33 <br> 34 35 <div style="text-align:center"> 36 <!-- 这里有3张图片设置3个onclick来调用showSlides()函数 --> 37 <span class="dot" onclick="showSlides()"></span> 38 <span class="dot" onclick="showSlides()"></span> 39 <span class="dot" onclick="showSlides()"></span> 40 </div> 41 42 </body> 43 </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; } /* 定位 "下一张" 按钮靠右 */ .next { right: 0; border-radius: 3px 0 0 3px; } /* 光标悬停于上一页、下一页控件时的rgba（颜色参数）
上面html代码中没有这两个控件,我会在这篇文章最后补充上去 */ .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 = 0; showSlides(); function showSlides() { var i; var slides = document.getElementsByClassName("mySlides"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex> slides.length) {slideIndex = 1} slides[slideIndex-1].style.display = "block"; setTimeout(showSlides, 3500); // 间隔3.5秒后修改图片 }
补充滚动图片中上一页、下一页两个控件的代码：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type = "text/css" href = "testGD.css" > <script src = "testGD.js"></script> <title>JS滚动效果</title> </head> <body> <div class="slideshow-container"> <div class="mySlides fade"> <div class="numbertext">1 / 3</div> <img src="1.jpg" style="width:100%"> <div class="text"></div> </div> <div class="mySlides fade"> <div class="numbertext">2 / 3</div> <img src="2.jpg" style="width:100%"> <div class="text"></div> </div> <div class="mySlides fade"> <div class="numbertext">3 / 3</div> <img src="3.jpg" style="width:100%"> <div class="text"></div> </div> <!-- 补充:这里的pulsSlides()函数没有在JS代码中 没有的话点击翻页控件是没有用的,我再补充一个plusSildes()的JS代码 --> <a class="prev" onclick="plusSlides(-1)">?</a> <a class="next" onclick="plusSlides(1)">?</a> </div> <br> <div style="text-align:center"> <!-- 设置X个onclick来调用showSlides()函数 --> <span class="dot" onclick="showSlides()"></span> <span class="dot" onclick="showSlides()"></span> <span class="dot" onclick="showSlides()"></span> </div> </body> </html>
补充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"; } //为了方便就只把函数名 showslides 区分首字母大小写来用了 如有理解上的不便还请谅解 var slideIndex = 0; showSlides(); function showSlides() { var i; var slides = document.getElementsByClassName("mySlides"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex> slides.length) {slideIndex = 1} slides[slideIndex-1].style.display = "block"; setTimeout(showSlides, 3500); // 间隔两秒后修改图片 }
运行效果（测试浏览器Chrome、Opera、搜狗、）：
标签：.text 函数名 幻灯片 容器 rom ack chrome point family
原文地址：http://www.cnblogs.com/darkchii/p/7464579.html
