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张图片,不过在实际应用中,你可以添加更多的 ...

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

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

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

CSS代码

JS代码

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

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

CSS代码

JS代码

JS 幻灯片代码(含自动播放)相关推荐

最新文章

热门文章