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


相关推荐

  • 微信小程序解析富文本标签[通俗易懂]

    微信小程序解析富文本标签[通俗易懂]

    微信小程序解析富文本标签[通俗易懂]wxParse方法我踩雷了微信官方文档有个更为便捷的标签<rich-textnodes=”{{}}”></rich-text>

    全栈程序员-站长的头像 全栈程序员-站长
    2022年8月18日
    12
  • 如何利用Javascript发送GET/POST请求「建议收藏」

    如何利用Javascript发送GET/POST请求「建议收藏」

    如何利用Javascript发送GET/POST请求「建议收藏」如何利用Javascript发送GET/POST请求最近在做基于TWS的分析系统，因为采用Flask+Java的技术架构方案，所以需要开发Web，然而我自己没有做过类似的开发，所以很多工作是从头开始学着做的。因此，在实现表单数据提交的时候，当时就想到个问题，如果一个页面里内容足够多的话，仅用form提交的话，后台就需要做非常复杂的判断，以此确认用户提交的是哪类数据，这样工程不仅难看，而且低效。于是咨

    全栈程序员-站长的头像 全栈程序员-站长
    2022年5月17日
    30
  • pycharm升级pip版本_怎么升级pip版本

    pycharm升级pip版本_怎么升级pip版本

    pycharm升级pip版本_怎么升级pip版本python-mpipinstall–upgradepip

    全栈程序员-站长的头像 全栈程序员-站长
    2022年10月23日
    0
  • 于Linux-2.6.32内核上编译ipset-6.23的坎坷经历[通俗易懂]

    于Linux-2.6.32内核上编译ipset-6.23的坎坷经历[通俗易懂]

    于Linux-2.6.32内核上编译ipset-6.23的坎坷经历[通俗易懂]新版本的ipset上周在儿童医院给小小看病等待叫号的间隙，收到了Netfilter邮件列表的推送消息，一览了ipset最新的6.23版本的新特性，很多正是我目前所需要的，特别是timeout和skbinfo参数的支持，具体的详情请自行查看manual，如果不想看那么多，我这里简单的贴一下：  timeout      All set types supportstheoptional

    全栈程序员-站长的头像 全栈程序员-站长
    2022年9月1日
    0
  • pycharm django环境搭建_宝塔Linux怎么搭建asp程序

    pycharm django环境搭建_宝塔Linux怎么搭建asp程序

    pycharm django环境搭建_宝塔Linux怎么搭建asp程序今天来简单总结一下使用Pycharm和Django来搭建一个最简单的PythonWeb应用（就是我们所说的‘HelloWorld’）。在这里，我们首先假设已经安装好了Python（2.x和3.x版本均可）。安装Django　　无论是Python2.x还是Python3.x版本，都可以使用pip来安装Django。在控制台使用如下命令：pipinstalldjango安装成功后，在i

    全栈程序员-站长的头像 全栈程序员-站长
    2022年8月28日
    0
  • TCP四次挥手原因

    TCP四次挥手原因

    TCP四次挥手原因客户端发了一个FIN501(0)ACK701,然后服务端回了一个ACK502。。此时客户端就处于半关闭状态。至于半关闭的话，还得详细解释一下：刚开始（左边）客户端和服务端（右边）都可以互相进行通信，都能进行发送数据和接收数据，但当客户端处于半关闭时，就变成了下面这样（此图只是举个例子，没必要纠结图）这图想表达的就是，客户端（左边）只能进行接收数据，而不能发送数据，服务端（右边）能进行发送数据和接收数据这种是通过什么机制实现的呢？因为一个套接字（左右方框均可看成.

    全栈程序员-站长的头像 全栈程序员-站长
    2022年5月13日
    51

发表回复

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

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