跪大神！！！求如何在JS代码效果中加上自动播放？

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播</title>
<style>

* {box-sizing: border-box}
body {font-family:Verdana,sans-serif}
.mySlides {display:none;}

/* 幻灯片容器 */
.slideshow-container {
max-width:1000px;
position:relative;
margin:auto;
}

.red {
width:300px;
height:200px;
background-color:red;
}

.green {
width:300px;
height:200px;
background-color:green;
}

.blue{
width:300px;
height:200px;
background-color:blue;
}

/* 上一张 & 下一张按钮 */
.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 5px 5px 0;
}

/* 定义 “下一张”按钮靠右 */
.next {
right:0;
border-radius:5px 0 0 5px;
}

/* 当鼠标经过时，为按钮添加一个有透明度的背景 */
.prev:hover, .next:hover {
background-color:rgba(0,0,0,0.8)
}

/* 标题文本 */
.text {
color:#f2f2f2;
font-size:15px;
position:absolute;
bottom:8px;
width:100%;
text-align:center;
}

/* 数字文本 */
.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:0.4}
to {opacity:1}
}

@keyframe fade {
from {opacity:0.4}
to {opacity:1}
}

</style>
</head>
<body>

<div class="slideshow-container">
    <div class="mySlides fade">
        <div class="numbertext">1 / 3</div>
        <div class="red" style="width: 100%"></div>
        <div class="text">文本 1</div>
    </div>

    <div class="mySlides fade">
        <div class="numbertext">2 / 3</div>
        <div class="green" style="width: 100%"></div>
        <div class="text">文本 2</div>
    </div>

    <div class="mySlides fade">
        <div class="numbertext">3 / 3</div>
        <div class="blue" style="width: 100%"></div>
       <div class="text">文本 3</div>
    </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>

<script>

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[slideIndex-1].style.display = "block";
    dots[slideIndex-1].className += " active ";
}

</script>

</body>
</html>

昵称什么DE

浏览 1994回答 2

2回答

zhanghqcn

setInterval(function(){ plusSlides(1);},1000)

1 0

darkwing_

setInterval，定时器，每隔一定时间执行以下往后翻的动作

2 0

随时随地看视频慕课网APP