Question

我必须制作一个必须自动和手动的幻灯片。

对于手动部分，我有两个按钮：下一个和上一个按钮，让我可以看到照片而无需在图像之间等待一段时间。

当我没有点击按钮时，幻灯片显示会自动进行，并且图像会在十秒后发生变化（例如）。

我的问题是，点击上一个/下一个按钮后，图像开始显示得更快，或者它们在屏幕上显示的不止一个。

以下是我正在使用的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>xPeke</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="icon" href="images/favicon-16x16.png" sizes="16x16" type="image/png">
</head>
<body>
    <!-- PROGRAM BAR -->
    <div id="program" class="topbar">
        <b style="color:black;">Program:</b> Luni-Vineri: 9:00-22:00&nbsp;&nbsp;&nbsp; Sambata: 9:00–20:00 &nbsp;&nbsp;&nbsp;Duminica: Inchis
    <div class="topbar2">
        <a href="#">Login <span> / </span> Register</a> 
    </div>
    </div>
    <br>
    <div class="slideshow-container">

    <div class="wall">
        <img class="mySlides" src="images/logo1.png" alt="Logo1" width="1500" height="300">
        <img class="mySlides" src="images/logo2.png" alt="Logo2" width="1500" height="300">
        <img class="mySlides" src="images/logo3.png" alt="Logo3" width="1500" height="300">
        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
        <a class="next" onclick="plusSlides(1)">&#10095;</a><br>
    </div></div>

    <form>
        <img class="generalone" src="images/logo.png" alt="Logo" width="180" height="45">
        <input class="search" type="text" name="search" placeholder="Search..">
    </form>

    <div class="generaltwo">
        <img class="socialmedia" src="images/facebook.png" alt="Facebook">
        <img class="socialmedia" src="images/youtube.png" alt="Youtube">
        <img class="socialmedia" src="images/reddit.png" alt="Reddit">
    </div>

    <script>
        var slideIndex = 1;
        var timer = null;
        showSlides(slideIndex);

        function plusSlides(n) {
        showSlides(slideIndex += n);
        }

        function currentSlide(n) {
        showSlides(slideIndex = n);
        }

        function showSlides(n) {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        if (n==undefined){n = ++slideIndex}
        if (n > slides.length) {slideIndex = 1}    
        if (n < 1) {slideIndex = slides.length}
        for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";       
        }
        slides[slideIndex-1].style.display = "block"; 
        timer = setTimeout(showSlides, 10000);
        }   
//      clear Timeout(timer);
    </script>


</body>
</html>

手动和自动幻灯片

0 个答案: