JavaScript 自动幻灯片，试图让按钮工作

Question

我在这里的第一篇文章！

我正在开发一个具有全屏幻灯片登录页面的网站。它每隔几秒更换一次图像，并在页面的一侧有小点，以指示当前哪个图像处于活动状态。 到目前为止一切都很好，但我想让小点可点击，并更改为相应的图像。

由于我在编码方面还很陌生，所以我还没有找到可行的解决方案。我可以在网上找到的每个图像滑块要么是手动的，带有可点击的按钮，要么是自动的，根本没有按钮。

这是我的代码：

HTML

<div id="slideshow">
        <div id="slide1" class="mySlides fade">Image 1</div>
        <div id="slide2" class="mySlides fade">Image 2</div>
        <div id="slide3" class="mySlides fade">Image 3</div>
        <div id="dotContainer">
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
        </div>          
</div>

CSS

.mySlides{
    display: none;  
}

#slideshow{
    width: 100%;
    height: 100vh;
    position: relative;
    background-color: #717171;
}

#dotContainer{
    position: absolute;
    top: 50%;
    left: 98%;
    transform: translate(-50%, -50%);
}

.dot{
    width: 12px;
    height: 12px;
    margin: 6px 15px 6px 0;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    display: block;
    transition: 0.6s;
}

.activeDot{
    background-color: rgba(34,34,34, 0.7);
}

.fade{
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade{
    from{
        opacity: 0.4;
    }
    to{
        opacity: 1;
    }
}

JavaScript

var slideIndex = 0;
    showSlides();

    function showSlides(){
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("dot");

        for (var i = 0; i < slides.length; i++){
            slides[i].style.display = "none";
        }
        slideIndex++;
        if (slideIndex > slides.length){
            slideIndex = 1;
        }
        for (var i = 0; i < dots.length; i++){
        dots[i].className = dots[i].className.replace(" activeDot", "");
        }
        slides[slideIndex-1].style.display = "block";
        dots[slideIndex-1].className += " activeDot";
        setTimeout(showSlides, 3000);       
    }

你可以在这里看到它的实际效果：JSFiddle Demo

非常感谢所有帮助，谢谢

Answer 1

https://jsfiddle.net/0wLgdoru/37/

var slideIndex = 0;
showSlides();

function showSlides() {
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");

    for (var i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > slides.length) {
        slideIndex = 1;
    }
    for (var i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" activeDot", "");
    }
    slides[slideIndex - 1].style.display = "block";
    dots[slideIndex - 1].className += " activeDot";

}

function dotClickHandler(e) {
clearInterval(intervalId);
    var activeDotIndex = this.getAttribute("slideDot");
    slideIndex = activeDotIndex - 1;
    showSlides();
    intervalId =  setInterval(showSlides, 3000);
}
var dotNode = document.getElementsByClassName("dot");
for (var i=0;i<dotNode.length;i++) {
    dotNode[i].addEventListener("click", dotClickHandler);
}

var intervalId =  setInterval(showSlides, 3000);

.mySlides{
	display: none;  
}

#slideshow{
	width: 100%;
	height: 100vh;
	position: relative;
  background-color: #717171;
}

#dotContainer{
	position: absolute;
	top: 50%;
	left: 98%;
	transform: translate(-50%, -50%);
}

.dot{
	width: 12px;
	height: 12px;
	margin: 6px 15px 6px 0;
	background-color: rgba(255, 255, 255, 0.7);
	border-radius: 50%;
	display: block;
	transition: 0.6s;
}

.activeDot{
	background-color: rgba(34,34,34, 0.7);
}

.fade{
	animation-name: fade;
	animation-duration: 1.5s;
}

@keyframes fade{
	from{
		opacity: 0.4;
	}
	to{
		opacity: 1;
	}
}

<div id="slideshow">
			<div id="slide1" class="mySlides fade">Image 1</div>
			<div id="slide2" class="mySlides fade">Image 2</div>
			<div id="slide3" class="mySlides fade">Image 3</div>
			<div id="dotContainer">
				<span class="dot" slideDot="1"></span>
				<span class="dot" slideDot="2"></span>
				<span class="dot" slideDot="3"></span>
			</div>			
</div>