我正在上一门计算机科学课程,并获得了有关创建幻灯片的特定方法的说明。我已严格按照说明进行操作,但是幻灯片无法正常运行。可以认为,当单击显示的图片时,将开始自动幻灯片播放,并在其他图片之间移动。但是,单击图片后,它将转到第二张图片,即使再单击一次也不会进一步。我究竟做错了什么?我只想通过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
)
答案 0 :(得分: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元素更容易
答案 1 :(得分:0)
您未正确引用图像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>
答案 2 :(得分:0)
document.myPic.src="Bosnia.jpg"
不是有效的Javascript。您需要执行document#getElementById()
而不只是myPic
。您在第一个中就没错。
document.getElementById('myPic').src="Greece.jpg"
答案 3 :(得分:0)
首先,如上所述,您需要全部使用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>