源码参考菜鸟教程：<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、搜狗、）：
JS实现图片滚动效果
原文地址：http://www.cnblogs.com/darkchii/p/7464579.html