如何使用javascript中的手动单击项目符号创建自动幻灯片显示？

Question

我一直在研究自动幻灯片，我的问题是当我单击项目符号以显示下一张图像时，该图像突然消失了。

起初我以为是因为我使用了addEventListener事件，所以它不起作用，所以我改为使用“ click”事件（即jquery），结果还是一样。

我现在真的不知道下一步该怎么做，我想听听专业人士或Web开发人员的一些建议！我会很感激。

var toggleMenu = $(document).ready(function () {
    $("#maintopics").click(function (e) {
        e.preventDefault();
        e.stopPropagation();
        $("#subtopics").toggle("fast");
    });

    $("html").click(function() {
        if ($("#subtopics").is(':visible')) {
            $("#subtopics").toggle();
        }
    });
});

// slideshow
var slideShow = $(document).ready(function () {
    var slideImages = document.getElementsByClassName("slide");
    var bulletImages = document.getElementsByClassName("bullets");
    var index = 0;

    function hideImages() {
        for (var i = 0; i < slideImages.length; i++) {
            slideImages[i].style.display = 'none';
            $(bulletImages[i]).removeClass("clicked");       
        }
    }

    function initiaImage() {
        for (var i = 0; i < slideImages.length; i++) {
            slideImages[0].style.display = 'block';
            $(bulletImages[index]).addClass("clicked");
        }
    }

    function slidingImages() {
        hideImages();
        if (index < slideImages.length - 1)
            index++;
        else {
            index = 0;
        }
        slideImages[index].style.display = 'block';
        $(bulletImages[index]).addClass("clicked");
    }

    function autoSlide() {
        setInterval(function () {
            slidingImages();
        }, 2000);        
    }

    function arrowSlide() {
        var prev = document.getElementById("prev");
        var next = document.getElementById("next");

        $(prev).click(function () {
            hideImages();
            if (index === 0) {
                index = slideImages.length;
            }
            slideImages[index - 1].style.display = 'block';
            index--;
            $(bulletImages[index]).addClass("clicked");
        });

        $(next).click(function () {
            hideImages();
            if (index === slideImages.length - 1) {
                index = -1;
            }
            slideImages[index + 1].style.display = 'block';
            index++;
            $(bulletImages[index]).addClass("clicked");
        });
    }

    function bulletSlide() {
        for (var i = 0; i < bulletImages.length; i++) {
            $(bulletImages).click(function () {
                hideImages();
                slideImages[i].style.display = 'block';
                index = i;
            });
        }
    }

    return {
        hideImages: hideImages(),
        initiaImage: initiaImage(),
        autoSlide: autoSlide(),
        arrowSlide: arrowSlide(),
        bulletSlide: bulletSlide()
    }
});

/*slideshow*/
#slide1 {
    background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}

#slide2 {
    background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}

#slide3 {
    background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}

#slideshow {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.slide {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    width: 800px;
    height: 400px;
    margin: 0 auto;
    max-width: 100%;
    z-index: 1;
}

.slidecontent {
    position: absolute;
    color: white;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
}

.arrow {
    position: absolute;
    cursor: pointer;
    width: auto;
    padding: 15px;
    top: 50%;
    font-size: 50px;
    color: white;
    border-radius: 0 10px 10px 0;
    transition: 0.5s ease;
    transform: translate3d(0,-50%,0);
}

#prev {
    left: 0px;
    max-width: 100%;
}

#next {
    right: 0px;
    max-width: 100%;
    border-radius: 10px 0px 0px 10px;
}

#previous:hover, #next:hover {
    background-color: rgba(0,0,0,0.8);
}

#slidebullets {
    position: relative;
    text-align: center;
    top: -30px;
}

.bullets {
    display: inline-block;
    background-color: gray;
    width: 15px;
    height: 15px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.6s ease;
}

.clicked {
    background-color: #ff0000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="index2.css" />
</head>
<body>

    <div id="slideshow">

        <div id="slide1" class="slide">
            <span class="slidecontent">SlideImage1</span>
        </div>

        <div id="slide2" class="slide">
            <span class="slidecontent">SlideImage2</span>
        </div>

        <div id="slide3" class="slide">
            <span class="slidecontent">SlideImage3</span>
        </div>

        <div id="prev" class="arrow">&#10094;</div>
        <div id="next" class="arrow">&#10095;</div>

    </div>

    <div id="slidebullets">
        <div id="bullet1" class="bullets"></div>
        <div id="bullet2" class="bullets"></div>
        <div id="bullet3" class="bullets"></div>
    </div>
    <script src="jquery.js"></script>
    <script src="index2.js"></script>


</body>
</html>

https://jsfiddle.net/b9asqxc5/1/

Answer 1

以错误的方式获取i的值，提醒i查看其值：

function bulletSlide() {
    for (var i = 0; i < bulletImages.length; i++) {
        $(bulletImages).click(function () {
            alert(i); // i = 3
            hideImages();
            slideImages[i].style.display = 'block';
            index = i;
        });
    }
}

请进行如下修改：

function bulletSlide() {
  $(bulletImages).click(function () {
    hideImages();
    slideImages[$(this).index()].style.display = 'block';
    index = $(this).index();
  });
}

Vanilla JS版本：

function bulletSlide() {
        [].forEach.call(bulletImages, function(bimg,i,a) {
        bimg.addEventListener('click', function () {
            hideImages();
            slideImages[i].style.display = 'block';
            index = i;
        });
    });
}