Question

我正在尝试在我的网站中实现可点击且自动的幻灯片放映。我设法使幻灯片放映自动播放（w3schools教程），但我也想将按钮设置为“交互式/可点击”。

我已经检查了w3schools上的可单击幻灯片演示教程，但是我不知道如何将其与当前代码结合起来。

文件 http://www.mediafire.com/file/7vc7shlqwn4m1in/Website_2018_Summer_-_FT.rar/file

HTML

 <div class="slideshow-container">
  <div class="home mySlides slide-fade">
   <h1>WORD</h1>
  </div>

 <div class="home mySlides slide-fade">
  <h1>WORD</h1>
  </div>

 <div class="home mySlides slide-fade">
  <h1>WORD</h1>     
 </div>
</div>

<div class="slideshow-dot">
 <span class="dot"></span>
 <span class="dot"></span>
 <span class="dot"></span>
</div>

CSS

body {
background: #0f3449;
 }
/*Slideshow*/
* {box-sizing: border-box;}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
width:100% ;
height: auto;
position:fixed;
top: 35vh;
margin: auto;
}

/*Slideshow controller*/
.slideshow-dot{
position: fixed;
left: 50vw;

transform: translate(-50%, -50%);
margin-bottom: 10vh;
bottom: 0;
}
.dot {
height: 10px;
width: 10px;
margin: 0 5px;
border-color:  #34e89c;
border-style: solid;
border-width: thin;
display: inline-block;
transition: background-color 0.6s ease;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari 3-8 */
transform: rotate(45deg);
}

.active {
background-color:  #34e89c;
}

/* Fading animation */
.slide-fade { 
-webkit-animation-name: fade;
-webkit-animation-duration: 2.5s;
animation-name: fade;
animation-duration: 2.5s;
}

@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

 /*Home*/
.home {
 position: absolute;
 width: 100%;
 height: auto;
 text-align: center;
 top: 35%;
 left: 0;
 margin: 0 auto;
 }

 h1 {
 position: relative;
 text-align: center;
 font-family: 'butlermedium', serif;
 letter-spacing: 6px;
 font-weight: normal;
 font-style: normal;
 color: white;
 }

脚本

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, 3500); // Change image every 2 seconds
}

可点击的自动幻灯片JavaScript

0 个答案: