JS 幻灯片代码(含自动播放)

全栈程序员站长

发布于 2022-09-14 09:54:23

8K0

发布于 2022-09-14 09:54:23

文章被收录于专栏：全栈程序员必看

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

实现幻灯片自动播放（没有上一张下一张功能）

HTML代码（把图片改一下就行）

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
    <link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
	<div class="slideshow-container">
		<div class="mySlides fade">
			<div class="numbertext">1 / 3</div>
			<img src="../images/img1.jpg" style="width:100%">
			<div class="text">文本 1</div>
		</div>

		<div class="mySlides fade">
			<div class="numbertext">2 / 3</div>
			<img src="../images/img2.jpg" style="width:100%">
			<div class="text">文本 2</div>
		</div>

		<div class="mySlides fade">
			<div class="numbertext">3 / 3</div>
			<img src="../images/img3.jpg" style="width:100%">
			<div class="text">文本 3</div>
		</div>

	</div>
	<br>
	<div style="text-align:center">
		<span class="dot"></span>
		<span class="dot"></span>
		<span class="dot"></span>
	</div>
    <script src="1.js"></script>
</body>
</html>

CSS代码

* {
    box-sizing: border-box;
}

body {
    font-family: Verdana, sans-serif;
}

.mySlides {
    display: none;
}

/* 幻灯片容器 */
.slideshow-container {
    max-width: 1000px;  /* 设置最大宽度 */
    position: relative;
    margin: auto;
}

/* 标题文本 */
.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: 0px;
}

/* 标记符号 */
.dot {
    cursor: pointer;
    height: 13px;
    width: 13px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;    /* 使其既具有block的宽度高度特性又具有inline的同行特性 */
    transition: background-color 0.6s ease;         /* CSS3 过渡 */
}

.active,
.dot:hover {
    background-color: #717171;
}

/* 淡出动画 */
.fade {
    -webkit-animation-name: fade;            /* Safari 和 Chrome */
    -webkit-animation-duration: 1.5s;        /* Safari 和 Chrome */
    animation-name: fade;               /* 必须定义动画的名称和动画的持续时间。*/                     
    animation-duration: 1.5s;           /* 如果省略持续时间，动画将无法运行，因为默认值是0 */
}

@-webkit-keyframes fade {     /* Safari 和 Chrome */
    from { opacity: .4 }       /* opacity 属性 透明度级别 */

    to { opacity: 1 }
}

@keyframes fade {            /* opacity???? 明天看 */
    from { opacity: .4}
    to {opacity: 1}
}

JS代码

var slideIndex = 0;
showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > slides.length) {
        slideIndex = 1
    }
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");  /* replace如果没找到的话 返回原字符 */
    }
    slides[slideIndex - 1].style.display = "block";
    dots[slideIndex - 1].className += " active";
    setTimeout("showSlides()", 2000); // 切换时间为 2 秒
}

实现幻灯片自动播放（同时添加了上一张下一张按钮功能和点选）

HTML代码（把图片改一下就行）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="2.css" type="text/css">
</head>
<body>
    <div class="slideshow-container">
        <div class="mySlides fade">
          <div class="numbertext">1 / 3</div>
          <img src="../images/img1.jpg" style="width:100%">
          <div class="text">文本 1</div>
        </div>
       
        <div class="mySlides fade">
          <div class="numbertext">2 / 3</div>
          <img src="../images/img2.jpg" style="width:100%">
          <div class="text">文本 2</div>
        </div>
       
        <div class="mySlides fade">
          <div class="numbertext">3 / 3</div>
          <img src="../images/img3.jpg" style="width:100%">
          <div class="text">文本 3</div>
        </div>
       
        <a class="prev" onclick="plusSlides(-2)">❮</a>  <!-- 这里-2是因为slideIndex++; -->
        <a class="next" onclick="plusSlides(0)">❯</a>   <!-- 这里 0是因为slideIndex++;-->
      </div>
      <br>
      <div style="text-align:center">
        <span class="dot" onclick="currentSlide(0)"></span> 
        <span class="dot" onclick="currentSlide(1)"></span> 
        <span class="dot" onclick="currentSlide(2)"></span> 
      </div>
      <script src="2.js"></script>
</body>
</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;
}
 
/* On hover, add a black background color with a little bit see-through */
.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}
}

JS代码

var slideIndex = 0;
var t;
showSlides(slideIndex);
 
function plusSlides(n) {
  showSlides(slideIndex += n);
}
 
function currentSlide(n) {
  showSlides(slideIndex = n);
}
 
function showSlides(n) {
  clearTimeout(t);
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("dot");
  if (n > slides.length) {slideIndex = 0}   /* 这里设置为slideInde=0  因为后面slideIndex++; */
  if (n < 0) {slideIndex = slides.length-1}   /* 这里是slides.length-1因为后面slideIndex++; */
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none"; 
  }
  /* 自动播放设置变量自增 */
  slideIndex++;
  if (slideIndex > slides.length) {
      slideIndex = 1;     /* 这里不能设置slideInde=0  设置为1 因为后面slideIndex没有++ */
  }
  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";
  t = setTimeout("showSlides(slideIndex)", 3000); // 切换时间为 2 秒
}

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/158550.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年7月1，如有侵权请联系 cloudcommunity@tencent.com 删除

https