Question

我正在上一门计算机科学课程，并获得了有关创建幻灯片的特定方法的说明。我已严格按照说明进行操作，但是幻灯片无法正常运行。可以认为，当单击显示的图片时，将开始自动幻灯片播放，并在其他图片之间移动。但是，单击图片后，它将转到第二张图片，即使再单击一次也不会进一步。我究竟做错了什么？我只想通过4张图片制作幻灯片。

# creating and joining two plots (plot is shown above)
cowplot::plot_grid(
  # plot 1
  ggplot(mtcars, aes(x = wt, y = mpg)) + geom_blank() +
    labs(
      subtitle = subtitle_maker(effsize_df, "p_omega"),
      title = "partial omega"
    ),
  # plot 2
  ggplot(mtcars, aes(x = wt, y = mpg)) + geom_blank() +
    labs(
      subtitle = subtitle_maker(effsize_df, "p_eta"),
      title = "partial eta"
    ),
  labels = c("(a)", "(b)"),
  nrow = 1
)

Answer 1

使用 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>

而且无需使用Form元素更容易

Answer 2

您未正确引用图像src。 myPic从未分配到任何地方，并且javascript试图查找未声明的变量时崩溃。

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

然后，您可以在需要引用元素src的任何地方使用myPic。

	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>

Answer 3

document.myPic.src="Bosnia.jpg"

不是有效的Javascript。您需要执行document#getElementById()而不只是myPic。您在第一个中就没错。

document.getElementById('myPic').src="Greece.jpg"

Answer 4

首先，如上所述，您需要全部使用getElementById，因此我建议使用变量来引用myPic。除了调整图片之外，如果图片未显示，我还会将值重新分配给“ alt”，否则每次都会显示默认的“ Aus”。

（在旁注中，我知道您已被指示以特殊方式进行幻灯片放映，但是有许多更简便的方法来进行幻灯片放映，并且您会在网站上找到许多替代方法。）

希望这会有所帮助

<!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>

JavaScript幻灯片无法按预期工作

4 个答案: