javascript 幻灯片代码(含自动播放)
HTML
<div class="slideshow-container">
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img src="https://c.runoob.com/wp-content/uploads/2017/01/img_mountains_wide.jpg" style="width:100%">
<div class="text">文本 1</div>
</div> <div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<img src="https://c.runoob.com/wp-content/uploads/2017/01/img_fjords_wide.jpg" style="width:100%">
<div class="text">文本 2</div>
</div> <div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<img src="https://c.runoob.com/wp-content/uploads/2017/01/img_nature_wide.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>
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:;
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:;
} /* 标记符号 */
.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:}
} @keyframes fade {
from {opacity: .4}
to {opacity:}
}
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", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000); // 切换时间为 2 秒
}
javascript 幻灯片代码(含自动播放)的更多相关文章
- iframe插入视频自动播放代码
<iframe marginwidth=0 marginheight=0 src='http://www.wsview.com/yzplayerAction!play2.action?autoP ...
- H5音乐自动播放ios//禁止安卓手机图片点击
定义音乐按钮 <div id="music-btn" class="o-play" style="width: 24px; height: 24 ...
- 自动播放——幻灯片缓冲效果&&带Loading效果的图片切换&&移动效果(按轨迹移动)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- setTimeout应用 && 自动播放——幻灯片效果&& 自动改变方向——幻灯片效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- javascript采用Broadway实现安卓视频自动播放的方法(这种坑比较多 不建议使用)
javascript采用Broadway实现安卓视频自动播放的方法Broadway 是一个 H.264 解码器, 比jsmpge清晰度要高 使用 Emscripten 工具从 Android 的 H. ...
- javascript焦点图自动播放
这次是完整版,网页点开就能自动播放 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- 网页中引用优酷视频去广告自动播放代码[xyytit]
很多时候需要在网站中加入视频,可视频太大放自己服务器上太占空间,可以把视频上传到优酷网上,这样节省了空间,打开速度方面也会有不少提升.下面教大家如何引用自动播放的优酷视频.把下面的代码加在你网页适当位 ...
- JavaScript一个页面中有多个audio标签,其中一个播放结束后自动播放下一个,audio连续播放
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript自动播放背景音乐
问题描述 js控制audio自动播放音乐时报错: Uncaught (in promise) DOMException 我的报错之前的代码: <audio id="myaudio&qu ...
随机推荐
- 计数排序、桶排序python实现
计数排序在输入n个0到k之间的整数时,时间复杂度最好情况下为O(n+k),最坏情况下为O(n+k),平均情况为O(n+k),空间复杂度为O(n+k),计数排序是稳定的排序. 桶排序在输入N个数据有M个 ...
- 流水线技术原理和Verilog HDL实现
所谓流水线处理,如同生产装配线一样,将操作执行工作量分成若干个时间上均衡的操作段,从流水线的起点连续地输入,流水线的各操作段以重叠方式执行.这使得操作执行速度只与流水线输入的速度有关,而与处理所需的时 ...
- HtmlHelper的扩展分页方法
一.新建一个空MVC项目,命名为MVCAppPager 二.新建一个文件夹PageHelper,在文件夹下新建接口IPageList以及实现类PageList IPageList接口: public ...
- Google Summer of Code 2017 经验谈
Google Summer of Code (GSoC) 2018 又要开始了. 如果想实现你心中的开源梦想, 用代码让世界变得更美好. 参加GSoC可能是你进入开源的世界最好途径. GSoC是什么 ...
- Zookeeper的单节点集群详细启动步骤
这个很简单,见如下博客. 1 week110的zookeeper的安装 + zookeeper提供少量数据的存储 [hadoop@weekend110 zookeeper-3.4.6]$ pwd/ho ...
- 数据分析-jupyter
安装 jupyter pip install jupyter 快捷键 插入 cell : a b 删除cell : x 切换cell的模式: m y 执行 shift +enter 查看帮助 ...
- HRBUST 1376 能量项链
能量项链 Time Limit: 1000ms Memory Limit: 32768KB This problem will be judged on HRBUST. Original ID: 13 ...
- 深入理解Core Data
留给我这忘事精看 Core Data 是什么? 大概八年前,2005年的四月份,Apple 公布了 OS X 10.4,正是在这个版本号中 Core Data 框架公布了.那个时候 YouTube 也 ...
- ios—项目开发需求文档
电子商务产品项目需求方案 模块 标准 接入方式 后台(大致需求说明) 前端 购 实物 多商户接入,可支付商品: 基础功能 功能说明 所有须要 Lbs .城市选择,分享.商区.搜索.返回.关闭 LBS: ...
- 48.Cookie 管理
转自:http://www.runoob.com/nodejs/nodejs-express-framework.html 我们可以使用中间件向 Node.js 服务器发送 cookie 信息,以下代 ...