Слайд-шоу JavaScript не работает как задумано - PullRequest
Новая
       8

Слайд-шоу JavaScript не работает как задумано

0 голосов
/ 03 декабря 2018

Я прохожу курс информатики и получил инструкции по определенному способу создания слайд-шоу.Я точно следовал инструкциям, но слайд-шоу не работает должным образом.Предполагается, что при нажатии на отображаемое изображение начинается автоматическое слайд-шоу, перемещаясь по другим изображениям.Однако при нажатии на изображение оно переходит ко второму изображению, но не далее, даже если щелкнуть снова.Что я делаю неправильно?Я просто хочу сделать слайд-шоу из 4 фотографий. 

<!DOCTYPE html>
<html lang="en">
<head>
<title>Lab</title>
<meta charset="utf-8">
<script>
	var showCounter = 0
	var myTimeout
	function myShow ( )
	{if (showCounter == 0)
	{document.getElementById('myPic').src="Greece.jpg"
	showCounter = 1}
	else if (showCounter == 1)
	{document.myPic.src="Korea.jpg"
	showCounter = 2}
	else if (showCounter == 2)
	{document.myPic.src="Bosnia.jpg"
	showCounter = 3}
	else
	{document.myPic.src="Austria.jpg"
	showCounter = 0}
	myTimeout = setTimeout ("myShow()", 500)
	}
</script>
</head>
<body>
<img src="Austria.jpg" alt="Aus" height="300" width="500" id="myPic"
onclick="myShow()">
<form name="imageForm" id="imageForm">
	<input type="button" name="b1" id="b1"
	value="Stop Slide Show"
	onclick="clearTimeout(myTimeout)">
</form>
</body>
</html>

Ответы [ 4 ]

0 голосов
/ 03 декабря 2018

Использование setTimeout неверно.В этом случае вы должны использовать setInterval 

var
    showCounter    = 0,
    images         = [ "Greece.jpg", "Korea.jpg", "Bosnia.jpg", "Austria.jpg" ],
    intervalID     = 0,
    myPic_element  = document.getElementById('myPic'),
    StopButton     = document.getElementById('bt_stop')
;

myPic_element.onclick = function() {
    clearInterval(intervalID);
    intervalID = setInterval(myShow , 1000);
}

StopButton.onclick = function() {
    clearInterval(intervalID);
}

function myShow() {
    myPic_element.src = images[showCounter];
    myPic_element.alt = images[showCounter].split('.')[0];

    showCounter = (showCounter + 1 ) % images.length;
}
<img  id="myPic" src="Austria.jpg" alt="Austria" height="300" width="500" />

<button id="bt_stop">Stop Slide Show</button>

И нет необходимости использовать элемент формы

0 голосов
/ 03 декабря 2018 
document.myPic.src="Bosnia.jpg"

не является допустимым Javascript.Вам нужно сделать document#getElementById() вместо myPic.Вы правильно поняли, хотя в первом. 

document.getElementById('myPic').src="Greece.jpg"
0 голосов
/ 03 декабря 2018

Во-первых, как упоминалось выше, вам нужно получить getElementById для всех, и поэтому я бы рекомендовал использовать переменную для ссылки на myPic.В дополнение к настройке изображения, я бы переназначил значения на «alt» в случае, если изображение не отображается, в противном случае ваше «Aus» по умолчанию будет отображаться каждый раз.

(На sidenote я понимаювас проинструктировали делать слайд-шоу определенным образом, но есть много более простых способов сделать слайд-шоу, и вы найдете много альтернативных методов на сайте ..)

Надеюсь, это поможет 

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Lab</title>
  <meta charset="utf-8">

</head>

<body>
  <img id="myPic" src="Austria.jpg" alt="Austria" height="300" width="500" onclick="myShow()">
  <form name="imageForm" id="imageForm">
    <input type="button" name="b1" id="b1" value="Stop Slide Show" onclick="clearTimeout(myTimeout)">
  </form>
</body>
  <script>
    var showCounter = 0;
    var pic = document.getElementById('myPic');
    pic.src ="Austria.jpg";
    pic.alt="Aus";
    var myTimeout;
    

    function myShow() {
      if (showCounter == 0) {
        pic.src = "Greece.jpg";
        pic.alt="Greece"
        showCounter = 1;
      }
      else if (showCounter == 1) {
        pic.src = "Korea.jpg";
        pic.alt ="Korea"
        showCounter = 2;
      }
      else if (showCounter == 2) {
        pic.src = "Bosnia.jpg";
        pic.alt = "Bosnia";
        showCounter = 3;
      }
      else if (showCounter == 3) {
        pic.src = "Austria.jpg";
        pic.src="Austria";
        showCounter = 0;
      }
    
    myTimeout = setTimeout("myShow()", 1500)
    }
  </script>

</html>
0 голосов
/ 03 декабря 2018

Вы не обращаетесь к изображению src правильно.myPic никогда нигде не назначается, и javascript падает, пытаясь найти необъявленную переменную.

var myPic = document.getElementById('myPic');

, тогда вы можете использовать myPic везде, где вам нужно сослаться на элемент src. 

	var showCounter = 0
	var myTimeout
  var myPic = document.getElementById('myPic');
	function myShow ( )
	{
    if (showCounter == 0)
	  {
      myPic.src="https://testcreative.co.uk/wp-content/uploads/2017/10/Test-Logo-Circle-black-transparent.png"
	    showCounter = 1
    } else if (showCounter == 1) {
      myPic.src="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/ce2ece60-9b32-11e6-95ab-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg"
	    showCounter = 2
    } else if (showCounter == 2) { myPic.src="https://d3icht40s6fxmd.cloudfront.net/sites/default/files/test-product-test.png"
	    showCounter = 3
    } else {
    myPic.src="https://images.fireside.fm/podcasts/images/b/bc7f1faf-8aad-4135-bb12-83a8af679756/cover_medium.jpg"
	    showCounter = 0
    }
	  myTimeout = setTimeout ("myShow()", 500)
	}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lab</title>
<meta charset="utf-8">
</head>
<body>
<img src="https://images.fireside.fm/podcasts/images/b/bc7f1faf-8aad-4135-bb12-83a8af679756/cover_medium.jpg" alt="Aus" height="300" width="500" id="myPic"
onclick="myShow()">
<form name="imageForm" id="imageForm">
	<input type="button" name="b1" id="b1"
	value="Stop Slide Show"
	onclick="clearTimeout(myTimeout)">
</form>
</body>
</html>
...