Zanikanie diva wraz ze zmianą zdjęcia(slider js)

Question

Witam,

Utworzyłem slider w javascript i odpowiednio dla tego slidera utworzyłem diva w html.Tło strony ustawiłem na jasnoszary kolor a diva na ciemnoszary.Jednak przy każdej zmianie zdjęcia zanika również ciemnoszare tło diva.Probowałem na sztywno ustawić wysokosc i szerkosc diva(większą od zdjęć)ale to nie pomogło.Jak można ustawić to tak,aby tylko zdjęcie się zmieniało bez zaniku diva?

Za odpowiedź z góry dziękuję.

<div id="slider">
  		<span onclick="ustawslajd(1)" style="cursor:pointer;">[1]</span>
  		<span onclick="ustawslajd(2)" style="cursor:pointer;">[2]</span>
  		<span onclick="ustawslajd(3)" style="cursor:pointer;">[3]</span>
    </div>

#slider
{
	background-color:#5d5d5d;
	width:940px;
	height: 1000px;
	margin:20px;
	padding:10px;
	text-align:center;
}

 

Comments

Wydaje mi się że błąd znajduje się w javascripcie, czy mógłbyś pokazać kod slidera?

---

@migty0ne,

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

 

    <script type="text/javascript">

 

        var numer = Math.floor(Math.random()*3)+1;

 

        var timer1 = 0;

        var timer2 = 0;

 

        function ustawslajd(nrslajdu)

        {

            clearTimeout(timer1);

            clearTimeout(timer2);

            numer = nrslajdu -1;

 

            schowaj();

            setTimeout("zmienslajd()",500);

        }

 

        function schowaj()

        {

            $("#slider").fadeOut(500);

        }

 

        function zmienslajd()

        {

            numer++;if (numer>3) numer = 1;

 

            var plik = "<img src=\"slajdy/slide" + numer + ".png\" />";

 

            document.getElementById("slider").innerHTML = plik;

            $("#slider").fadeIn(500);

 

            timer1 = setTimeout("zmienslajd()",5000);

            timer2 = setTimeout("schowaj()",4500);

        }

 

    </script>

---

@Author[],

Po twojej sugestii,znalazłem rozwiązanie.

W javascripcie i html tak samo nazwałem diva(co jest konieczne aby zdjęcia działały),także naturalnie zanikało jednocześnie zdjęcie i div.Więc tego diva id="slajder",zamknąłem w kolejnym divie class i wszystko teraz działa.

Dziękuję bardzo za pomoc.

function schowaj()

        {

            $("#slider").fadeOut(500);

        }

<div class="slider">
  		<span onclick="ustawslajd(1)" style="cursor:pointer;">[1]</span>
  		<span onclick="ustawslajd(2)" style="cursor:pointer;">[2]</span>
  		<span onclick="ustawslajd(3)" style="cursor:pointer;">[3]</span>
      <div id="slider"></div>

</div>

 

---

Dokładnie tworzysz tzw. "kontener"

<div class="slider-container">
  <div id="slider">
    <span onclick="ustawslajd(1)">[1]</span>
    <span onclick="ustawslajd(2)">[2]</span>
    <span onclick="ustawslajd(3)">[3]</span>
  </div>
</div>

* {
  box-sizing: border-box;
}
.slider-container {
  background-color:#5d5d5d;
  width: 940px;
  height: 1000px;
  padding: 10px;
  margin: 20px;
}
#slider
{
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
}
#slider span
{
  /* <span ... style="cursor:pointer;"> */
  cursor:pointer;
}

let numer = Math.floor(Math.random()*3)+1;

let timer1 = 0;
let timer2 = 0;

function ustawslajd(nrslajdu)
{
  clearTimeout(timer1);
  clearTimeout(timer2);
  numer = nrslajdu;
  //console.log(numer);

  schowaj();
  setTimeout("zmienslajd()",500);
}

function schowaj()
{
  $("#slider").fadeOut(500);
}

function zmienslajd()
{
  if (numer>3) numer=1;
  //console.warn(numer);
  // const plik = `<img src="slajdy/slide${numer}.png">`;
  const plik = `<img src="https://source.unsplash.com/800x80${numer++}">`;

  document.getElementById("slider").innerHTML = plik;
  $("#slider").fadeIn(500);

  timer1 = setTimeout("zmienslajd()",5000);
  timer2 = setTimeout("schowaj()",4500);
}

 

Answer 1

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

	<script type="text/javascript">

		var numer = Math.floor(Math.random()*3)+1;

		var timer1 = 0;
		var timer2 = 0;

		function ustawslajd(nrslajdu)
		{
			clearTimeout(timer1);
			clearTimeout(timer2);
			numer = nrslajdu -1;

			schowaj();
			setTimeout("zmienslajd()",500);
		}

		function schowaj()
		{
			$("#slider").fadeOut(500);
		}

		function zmienslajd()
		{
			numer++;if (numer>3) numer = 1;

			var plik = "<img src=\"slajdy/slide" + numer + ".png\" />";

			document.getElementById("slider").innerHTML = plik;
			$("#slider").fadeIn(500);

			timer1 = setTimeout("zmienslajd()",5000);
			timer2 = setTimeout("schowaj()",4500);
		}

	</script>