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

源码部分

对应的图片地址改为自己的图片地址:

HTML 代码:

div class=slideshow-container>
div class=mySlides fade>
div class=numbertext>1 / 3div>
img src=img1.jpg style=width:100%>
div class=text>文本 1div>
div>

div class=mySlides fade>
div class=numbertext>2 / 3div>
img src=img2.jpg style=width:100%>
div class=text>文本 2div>
div>

div class=mySlides fade>
div class=numbertext>3 / 3div>
img src=img3.jpg style=width:100%>
div class=text>文本 3div>
div>

a class=prev onclick=plusSlides(-1)>a>
a class=next onclick=plusSlides(1)>a>
div>
br>

div style=text-align:center>
span class=dot onclick=currentSlide(1)>span>
span class=dot onclick=currentSlide(2)>span>
span class=dot onclick=currentSlide(3)>span>
div>

CSS 代码设置上一张下一张图片的按钮及文本。

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}
}

JavaScript 代码:

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
showSlides(slideIndex += n);
}

function currentSlide(n) {
showSlides(slideIndex = n);
}

function showSlides(n) {
var i;
var slides = document.getElementsByClassName(mySlides);
var dots = document.getElementsByClassName(dot);
if (n > slides.length) {slideIndex = 1}
if (n 1) {slideIndex = slides.length}
for (i = 0; i slides.length; i++) {
slides[i].style.display = none;
}
for (i = 0; i dots.length; i++) {
dots[i].className = dots[i].className.replace( active, );
}
slides[slideIndex1].style.display = block;
dots[slideIndex1].className += active;
}

在线演示

你也可以将幻灯片设置为自动播放,JavaScript 代码修改为如下:

JavaScript 代码:

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[slideIndex1].style.display = block;
dots[slideIndex1].className += active;
setTimeout(showSlides, 2000); // 切换时间为 2 秒
}

在线演示

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
  1. 免费下载或者VIP会员资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
  2. 提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。 若排除这种情况,可在对应资源底部留言,或联络我们。
  3. 找不到素材资源介绍文章里的示例图片?
    对于会员专享、整站源码、程序插件、网站模板、网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
  4. 付款后无法显示下载地址或者无法查看内容?
    如果您已经成功付款但是网站没有弹出成功提示,请联系站长提供付款信息为您处理
  5. 购买该资源后,可以退款吗?
    源码素材属于虚拟商品,具有可复制性,可传播性,一旦授予,不接受任何形式的退款、换货要求。请您在购买获取之前确认好 是您所需要的资源

评论(0)

提示:请文明发言