JavaScript自动幻灯片显示，尝试获取工作按钮

Question

my very first post on here!

I'm working on a website, which has a full screen slideshow landing page. It changes image every few seconds, and has small dots at the side of the page, to indicate which image is currently active. It's all working great so far, but I'd like to make the small dots clickable, and change to the respective image.

As I am still very new at coding, I haven't been able to find a solution that works. Every image slider I can find online is either manual ones, with clickable buttons, or automatic ones, with no buttons at all.

Here's my code:

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

You can see it in action here: JSFiddle Demo

All help is very much appreciated, thanks

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>