通过用图像替换滑块来停止滑块答案

【问题标题】：Stopping slider by replacing it with an image通过用图像替换滑块来停止滑块
【发布时间】：2021-03-30 14:40:26
【问题描述】：

    var numer = Math.floor(Math.random()*2)+1;
    var timer1 = 0;
    var timer2 = 0;
    
    function podmianaObrazu(id) 
    {
        var img = document.getElementById("jablka" + id);
        
        img.src = "https://images.unsplash.com/photo-1610999162204-828195e48803?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80";
        img.classList.add("selected");
        
        var count = document.querySelectorAll(".selected").length;
        
    var plik = "<img src=\"takk1.png\" />";
        document.getElementById("slider").innerHTML = plik;
        
        j0 = document.getElementById("jablka0");
        j1 = document.getElementById("jablka1");
        j2 = document.getElementById("jablka2");
        j3 = document.getElementById("jablka3");
        j4 = document.getElementById("jablka4");
        j5 = document.getElementById("jablka5");
        j6 = document.getElementById("jablka6");
        j7 = document.getElementById("jablka7");
        j8 = document.getElementById("jablka8");
        j9 = document.getElementById("jablka9");
        j10 = document.getElementById("jablka10");
        j11 = document.getElementById("jablka11");
    
        console.log(count);
        if (count == 12)
            {   
                var plik = "<img src=\"http://designmodo.com/demo/responsiveslider/img/slide3.jpg\" />";
                document.getElementById("slider").innerHTML = plik;
                
                $('#jablka0').hide('slow');
                $('#jablka1').hide('slow');
                $('#jablka2').hide('slow');
                $('#jablka3').hide('slow');
                $('#jablka4').hide('slow');
                $('#jablka5').hide('slow');
                $('#jablka6').hide('slow');
                $('#jablka7').hide('slow');
                $('#jablka8').hide('slow');
                $('#jablka9').hide('slow');
                $('#jablka10').hide('slow');
                $('#jablka11').hide('slow');
                
            }
    }
             
    function schowaj()
        {
            $("#slider").fadeOut(500);
        }
         
    function zmienslajd()
       {
                numer++; if (numer>2) numer=1;
                
                var plik = "<img src=\"http://designmodo.com/demo/responsiveslider/img/slide" + numer + ".jpg\" />";
        
                document.getElementById("slider").innerHTML = plik;
                $("#slider").fadeIn(500);
                
                timer1 = setTimeout("zmienslajd()", 5000);
                timer2 = setTimeout("schowaj()", 4500);
            
            }

* 
{ 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}
body
{
    font-family: Helvetica;
    font-size: 18px;
    padding: 0;
    margin: 0;
}
#kontenerek 
{
    background-color: #b3ffb3;
    width: 47%;
    height: 900px;
    float: left;
    position: relative;
}
#wypelniacz
{
    width: 100%;
    height: 900px;
    float: left;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}
#slider
{
    background-color: #b3ffb3;
    width: 100%;
    height: 900px;
    float: left;
    position: absolute;
    top: 0;
    left: 0;
}
.jablko
{
    position: absolute;
    height: 70px;
    width: 70px;
    animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari i Chrome */
    -o-animation: fadein 2s; /* Opera */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="pl">
<head>
    <title>strona glowna</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="cssdos.css">
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script type="text/javascript"> 
     </script>
</head>
<body onload="zmienslajd()">
    <div id="kontenerek">
        <div id="slider">
        </div>
        
        <div id="wypelniacz">
            <a><img style="top: 17%; right: 45% " alt="" src="https://images.unsplash.com/photo-1568702846914-96b305d2aaeb?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" class="jablko" id="jablka0" onclick="podmianaObrazu(0) ; this.onclick=null;"></a>
            <a><img style="top: 22%; right: 60%;" alt="" src="https://images.unsplash.com/photo-1568702846914-96b305d2aaeb?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" class="jablko" id="jablka1" onclick="podmianaObrazu(1) ; this.onclick=null;"></a>
            <a><img style="top: 28%; right: 51%;" alt="" src="https://images.unsplash.com/photo-1568702846914-96b305d2aaeb?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" class="jablko" id="jablka2" onclick="podmianaObrazu(2) ; this.onclick=null;"></a>
            <a><img style="top: 24%; right: 37%;" alt="" src="https://images.unsplash.com/photo-1568702846914-96b305d2aaeb?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" class="jablko" id="jablka3" onclick="podmianaObrazu(3) ; this.onclick=null;"></a>
            <a><img style="top: 32%; right: 75%;" alt="" src="https://images.unsplash.com/photo-1568702846914-96b305d2aaeb?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" class="jablko" id="jablka4" onclick="podmianaObrazu(4) ; this.onclick=null;"></a>
            <a><img style="top: 37%; right: 67%;" alt="" src="https://images.unsplash.com/photo-1568702846914-96b305d2aaeb?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" class="jablko" id="jablka5" onclick="podmianaObrazu(5) ; this.onclick=null;"></a>
            <a><img style="top: 40%; right: 79%;" alt="" src="https://images.unsplash.com/photo-1568702846914-96b305d2aaeb?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" class="jablko" id="jablka6" onclick="podmianaObrazu(6) ; this.onclick=null;"></a>
            <a><img style="top: 37%; right: 40%;" alt="" src="https://images.unsplash.com/photo-1568702846914-96b305d2aaeb?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" class="jablko" id="jablka7" onclick="podmianaObrazu(7) ; this.onclick=null;"></a>
            <a><img style="top: 35%; right: 27%;" alt="" src="https://images.unsplash.com/photo-1568702846914-96b305d2aaeb?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" class="jablko" id="jablka8" onclick="podmianaObrazu(8) ; this.onclick=null;"></a>
            <a><img style="top: 50%; right: 13%;" alt="" src="https://images.unsplash.com/photo-1568702846914-96b305d2aaeb?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" class="jablko" id="jablka9" onclick="podmianaObrazu(9) ; this.onclick=null;"></a>
            <a><img style="top: 61%; right: 24%;" alt="" src="https://images.unsplash.com/photo-1568702846914-96b305d2aaeb?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" class="jablko" id="jablka10" onclick="podmianaObrazu(10) ; this.onclick=null;"></a>
            <a><img style="top: 55%; right: 54%;" alt="" src="https://images.unsplash.com/photo-1568702846914-96b305d2aaeb?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" class="jablko" id="jablka11" onclick="podmianaObrazu(11) ; this.onclick=null;"></a>
        </div>
    </div>

这是我的代码的快速即兴副本。它不能正常工作，所以它只是为了形象化我的意思。我有一些苹果和背景图片。背景是一个滑块，每 5 秒在 img1 和 img2 之间更改图像（但由于某种原因，它在 jsfiddle 中不起作用，但在我的浏览器中却是）。当我单击所有 12 个苹果时，滑块应替换为 img3。

var plik = "<img src=\"takk1.png\" />";
document.getElementById("slider").innerHTML = plik;

问题是，当我的滑块功能仍在运行时，img3 将在滑块的下一个图像交换中被替换，所以我想做的是通过以某种方式删除该滑块来用该 img3 替换滑块。

提前感谢您的帮助

【问题讨论】：

标签： javascript html jquery

【解决方案1】：

我能想到的最好的方法，也许不是最好的方法，但是嘿，如果可行的话......

function zmienslajd()
       {
                numer++; if (numer>2) numer=1;
                
                var plik = "<img src=\"drzewo" + numer + ".png\" />";
                
                document.getElementById("slider").innerHTML = plik;
                $("#slider").fadeIn(500);
                
                timer1 = setTimeout("zmienslajd()", 5000);
                timer2 = setTimeout("schowaj()", 4500);
            
                if (tester == "impreza"){
                
                var numer1 = numer + 2;
                
                var plik = "<img src=\"drzewo" + numer1 + ".png\" />";
                
                document.getElementById("slider").innerHTML = plik;
                $("#slider").fadeIn(99999999);
                
                timer1 = setTimeout("zmienslajd()", 99999999);
                timer2 = setTimeout("schowaj()", 99999999);}
                    
            }

【讨论】：