1. 全栈程序员必看首页

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

全栈程序员-站长 • • 未分类 • 阅读 16

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

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

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

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.net/158550.html原文链接：https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长
0 0


相关推荐

  • Supplier接口

    Supplier接口

    Supplier接口目录一 Supplier 接口源码二 Supplier 示例三 其他 Supplier 接口一 Supplier 接口源码 publicinterf T Getsaresult returnaresul Tget Supplier 接口是一个供给型的接口 本质就是一个容器 可以用来存储数据 或者是产生数据的规则 然后可以供其 T

    全栈程序员-站长的头像 全栈程序员-站长
    2025年6月11日
    0
  • 解决mac连接不上星巴克wifi的问题

    解决mac连接不上星巴克wifi的问题

    解决mac连接不上星巴克wifi的问题在星巴克写我的第一篇博客，结果mbp连wifi的时候遇到无法跳转到星巴克wifi页的问题，搞了一会儿发现一个好办法。。。正好试写一下mbp（macbookpro）如何连上星巴克的wifi来练个手～问题描述wifi显示连接，chrome浏览器随便打开一个网页却无法跳转，并显示未连接到互联网safari浏览器显示有跳转，但是网页并不能加载出来解决方案1连接上星巴克wifi2打开sa…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月17日
    1.1K
  • c语言中的异或运算_java中的异或运算符

    c语言中的异或运算_java中的异或运算符

    c语言中的异或运算_java中的异或运算符今天看到一位大神的博客，深受感触。决定也发一篇博客，证明一下我还活着。于是我翻看以前学习时做的一些笔记，整理了一下，得到了一个关于异或运算交换变量变量值的笔记。首先来看下面三组表达式，看起来他们都能实现交换两个变量的值。a=a^b;b=a^b;a=a^b;a=a^(b=b^(a=a^b));a^=b^=a^=b;可实际的情况是，前面2组表…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年9月27日
    0
  • LuaFileSystem学习心得

    LuaFileSystem学习心得

    LuaFileSystem学习心得

    全栈程序员-站长的头像 全栈程序员-站长
    2022年2月4日
    41
  • 外汇平台搭建，外汇交易社区，外汇支付通道，通过区块链如何改变外汇「建议收藏」

    外汇平台搭建，外汇交易社区，外汇支付通道，通过区块链如何改变外汇「建议收藏」

    外汇平台搭建，外汇交易社区，外汇支付通道，通过区块链如何改变外汇「建议收藏」在过去几年中，由区块链驱动的比特币对全球财务，特别是外汇行业产生了重大影响。这种创新的加密货币在全球范围内大肆挥霍，并成为头条新闻，很快就能感受到它的存在。虽然比特币很可能继续对外汇行业产生影响，但它实际上是锁定链，这种货币背后的技术，将对外汇行业产生更显着和不可逆转的影响。外汇产业的当前景观外汇市场是全球最大，最具流动性的市场。该行业每周五天，每天24小时开放，主要位于伦敦，而纽约市的每日…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年9月11日
    0
  • Mysql端口设置

    Mysql端口设置

    Mysql端口设置1.查看showglobalvariableslike’port’;2.修改修改配置文件（注意重启MySQL）

    全栈程序员-站长的头像 全栈程序员-站长
    2022年10月3日
    0

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号