JS实现图片滚动效果

Posted 2020-10-05

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS实现图片滚动效果相关的知识，希望对你有一定的参考价值。

　　源码参考菜鸟教程：<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实现图片滚动效果的主要内容，如果未能解决你的问题，请参考以下文章

JQuery实现文字无缝滚动效果 Marquee插件