Biblioteka jQuery nie działa, podpięta prawidłowo

pytanie zadane 9 września 2021 w JavaScript przez uzytkownik12415212 Nowicjusz (120 p.)
zamknięte 11 września 2021 przez ScriptyChris

Cześć, mam problem z biblioteką jQuery. Sam skrypt ma na celu automatyczną zmianę zdjęć. Wszystko gra do czasu aż podłączę bibliotekę jQuery. Ani zdjęcia się same nie zmieniają, ani nie ma efektu z biblioteki. Tutaj fragment kodu, dodam, że jestem początkujący.

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


function schowaj()

{

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

}


function zmienslajd()

{

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


  var plik = "<img class=\"img-fluid\" src=\"img/zmien" + numer + ".png\" />";


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

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


  setTimeout("zmienslajd()", 5000);

  setTimeout("schowaj()", 4500)


}

HTML

<!DOCTYPE html>

<html lang="pl">

<head>


  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  

  <title>x</title>

  <meta name="description" content="x">

  <meta name="keywords" content="x">

  <meta name="author" content="x">

  <meta http-equiv="X-Ua-Compatible" content="IE=edge">

  

  <script type="text/javascript" src="http://code.jquery.com/jquery-3.0.0.js"></script>

  <script type="text/javascript" src="jquery.js"></script>

  <script type="text/javascript" src="slajd.js"></script>

  <link rel="stylesheet" href="css/bootstrap.min.css">

  <link rel="stylesheet" href="main.css">

  

</head>


<body onload="zmienslajd()">

  <main>


      <div class="container">

        <div class="row">

          

          <div class="col-lg-8 bg-white text-body my-4 ml-auto mr-auto informacje">

            <div class="slajd-info">xyz<br>



            </div>

            <br><br>

            <div id="slajd"></div>

</main>

</body>

</html>

komentarz zamknięcia: Problem rozwiązany w komentarzach - przyczyną było podwójne podpięcie jQuery

Pokaż 16 poprzednich komentarzy

komentarz 11 września 2021 przez uzytkownik12415212 Nowicjusz (120 p.)

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

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

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

  var plik = "<img class=\"img-fluid\" src=\"img/zmien" + numer + ".png\" alt=\"Moja grafika\" />";

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

  setTimeout("zmienslajd()", 15000);
  setTimeout("schowaj()", 14500)

}

<!DOCTYPE html>
<html lang="pl">
<head>
	<meta charset="utf-8">
	<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script type="text/javascript" src="slajd.js"></script>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="main.css">
</head>

<body onload="zmienslajd()">
	<main>
		<article>
			<div class="container">
				<div class="row">
					<div class="col-lg-8 bg-white text-body my-4 ml-auto mr-auto informacje">
						<div class="slajd-info">Właśnie przeglądasz galerię moich grafik.<br>
							Obrazki przełączają się automatycznie co 15 sekund. <br>
						</div>
						<br><br>
						<div id="slajd"></div> <br><br>
					  </div>			
				</div>
			</div>
		</article>
	</main>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="js/bootstrap.min.js"></script>
</body>
</html>

Tak wygląda aktualnie mój kod. Może jest gdzieś jakiś błąd przez który strona nie czyta tej funkcji FadeIn

komentarz 11 września 2021 przez ScriptyChris Mędrzec (190,190 p.)

Dlaczego nadal dwukrotnie podpinasz jQuery: raz w <head> wersję 3.6.0, a potem w <body> 3.3.1 (slim)?

komentarz 11 września 2021 przez uzytkownik12415212 Nowicjusz (120 p.)

O kurczę działa. To był właśnie ten problem. Nie zauważyłem tego, że na samym końcu mam podpiętą jeszcze jedną bibliotekę. Bardzo dziękuję za pomoc i przepraszam za utrudnienia.