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 秒
}
JS 幻灯片代码(含自动播放)相关推荐
- 分享99个JS幻灯片代码,总有一款适合您
分享99个JS幻灯片代码,总有一款适合您 99个JS幻灯片代码下载链接:https://pan.baidu.com/s/1n8UQ41cem0GmgsOXCq9kMw?pwd=m5zf 提取码:m5 ...
- 分享63个JS幻灯片代码,总有一款适合您
分享63个JS幻灯片代码,总有一款适合您 63个JS幻灯片代码下载链接:https://pan.baidu.com/s/1tWjsZD6ZiHGiXYmDOqxqgA?pwd=nwl2 提取码:nw ...
- 自动播放文字html代码,在html代码上自动播放一个wav文件
我想在html代码上自动播放一个wav文件.我发现互联网上这个选项:在任何浏览器在html代码上自动播放一个wav文件 鸵鸟政策工作,但报道工作: 上镀铬的工作,也就是说,如果安装Windows Me ...
- js原生选项卡(自动播放无缝滚动轮播图)二
今天分享一下自动播放轮播图,自动播放轮播图是在昨天分享的轮播图的基础上添加了定时器,用定时器控制图片的自动切换,函数中首先封装一个方向的自动播放工能的小函数,这个函数中添加定时器,定时器中可以放向右走 ...
- 集RTMP, HLS, FLV, WebSocket 于一身的网页直播/点播播放器EasyPlayer.js引用videojs无法自动播放问题解决
EasyPlayer几乎涵盖了开发者所需的全部平台,尤其是在web端的EasyPlayer.js时遇到的播放器接入的问题,比如:不懂前端的js代码.没有公网服务器放置这些js脚本和网页.微信对接入IP ...
- Eclipse.自动提示--编写HTML/CSS/JS/JSP代码时自动提示的解决办法
最近在做一个javaweb的项目,在eclipse中编写jsp代码时没有代码提示这个梗让人很头疼,之前一直写Java代码或者在Dreamweaver中写HTML代码时自动提示代码用起来特别爽,这突然间 ...
- 解决Chrome浏览器中无法通过代码实现自动播放错误
错误提示为:Uncaught (in promise) DOMException: play() failed because the user didn't interact with the do ...
- video.js android,VideoJS + HTML5自动播放失败,适用于Android 2.3+和IOS 4+
我的VideoJS和HTML5项目针对更新的Web浏览器(较新版本的FireFox和Chrome)以及移动浏览器(Android2.3 +和IOS4 +).VideoJS + HTML5自动播放失败, ...
- 幻灯片轮播图(含自动播放和手动点击播放,代码易懂)
HTML代码: <!DOCTYPE html> <html lang="en"><head><meta charset="UT ...
- 网站首页js幻灯片代码
JS图片幻灯片,网站首页专用的图片特效代码,旅游网站用着最合适了,支持图片说明,每一幅图片都可以加标题和简短的文字介绍,右下角有图片切换控制按钮,示例中仅有5张图片,不过在实际应用中,你可以添加更多的 ...
最新文章
- linux退出远程登录命令,【linux命令】Linux 如何查看和关闭 ssh pts/n 远程登录用户...
- 什么是SCRUM敏捷开发
- Java设计模式之代理模式(Proxy)
- Ehcache学习笔记(一)基础入门
- could not perform addBatch
- YARP(Yet Another Reverse Proxy)是使用 .NET 构建的高度可定制的反向代理
- PostgreSQL的常见参数和技巧
- 高性能计算机的基准测试程序包括,QX∕T 148-2020 气象领域高性能计算机系统测试与评估规范(可复制版)(40页)-原创力文档...
- 团队作业(二):项目选题
- 终极版Servlet——我只能提示您路过别错过
- struts2异常处理流程_Struts2异常处理示例教程
- python getcwd_Python os.getcwd()方法
- 将GRUB输出重定向到串口
- chrome frame使用记录
- 浙江大学计算机程序设计能力考试(PAT)简介
- 【题解】LuoGu4654:[CEOI2017]Mousetrap
- python统计词频瓦尔登湖_点评《瓦尔登湖》
- DSP6657打印ti.sysbios.heaps.HeapMem,内存问题
- 使用C语言求斐波那契(Fibonacci)数列的第n项
- js 和 min.js 有什么区别
热门文章
- (转)DB2下载地址总结
- [Simulink] 从S函数到模块代码生成
- matlab计算边界层厚度,边界层厚度.PPT
- Oracle查看表空间使用率及爆满解决方案
- Dnf资源分析与提取工具(附代码)
- 中国全部城市的中心点坐标 json格式
- 电商项目java经验_分布式电商系统项目总结
- C# Microsoft.Office.Interop.Word 将多个word合成一个并插入图片 转换成pdf
- JavaScript - OOP编程思想
- HiveQL(三):修改表ALTER TABLE