<!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>
跪大神?。?！求如何在JS代碼效果中加上自動播放？
昵稱什么DE
2017-09-13 10:30:14
