无需重新加载页面即可播放幻灯片
Advance slideshow without reloading page
我的幻灯片脚本使用 onclick 事件 window.location.reload() 前进到下一个迷你幻灯片，导致页面在单击“下一个植物”按钮时闪烁。
理想情况下，onclick 事件应触发一个功能来推进幻灯片放映，无需重新加载页面。
不幸的是，创建这样一个函数说起来容易做起来难。
直觉上，我的第一个想法是放弃 onclick 事件 window.location.reload() 方法，而是让 onclick 事件调用 onLoad 函数 runShow()，认为重新调用此脚本会推进幻灯片放映。没有。
重新调用其他功能也无法推进幻灯片，现在我不知道下一步该怎么做。
请指教。谢谢。
body {
display: flex;
justify-content: center;
text-align: center;
background-color: black;
}
img {
display: block;
position: relative;
top: 20px;
max-width:100%;
max-height:calc(100vh - 160px - ((.4em + .6vmin) + (.4em + .6vmax)));
object-fit: contain;
}
.caption {
position: absolute;
bottom: 120px;
font-size: calc((.4em + .6vmin) + (.4em + .6vmax));
color: white;
left: 0;
right: 0;
width: 100%;
text-align: center;
}
p {
position: absolute;
bottom: 10px;
left: 0;
right: 0;
width: 100%;
text-align: center;
}
.button {
border-radius: 8px;
background-color: green;
border: none;
color: black;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<title>Plant Slideshow</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body onLoad="runShow()">
<img id="slide" onmouseover="stopShow()" onmouseout="runShow()" src="" alt="">
<script>
var genusSpecies={"Adam's Needle (Yucca filamentosa)":["Adam's Needle (Yucca filamentosa)1.jpg"],"Virginia Wild Rye (Elymus virginicus)":["Virginia Wild Rye (Elymus virginicus)1.jpg","Virginia Wild Rye (Elymus virginicus)2.jpg"]};
if (window.innerHeight > 1000) {
var specificResolution="./plants1220/"; // Higher-resolution photos for desktops
} else {
var specificResolution="./plants500/"; // Lower-resolution photos for smartphones
}
var curimg=0;
var keys=Object.keys(genusSpecies); // Creates array of keys
var plantNumber=Object.keys(genusSpecies).length;
x=Math.floor(Math.random() * (plantNumber)); // Selects random index number for “keys” array, the element’s value providing a named key for “genusSpecies”
var plant=genusSpecies[keys[x]]; // Value of named key (image file names of specific mini-slideshow)
function swapImage()
{
document.getElementById("slide").setAttribute("src",specificResolution+plant[curimg])
curimg=(curimg<plant.length-1)? curimg+1 : 0; timer = setTimeout("swapImage()",4000);
}
function stopShow()
{
clearTimeout(timer);
}
function runShow()
{
swapImage();
}
</script>
<div class="caption">
<script>
document.write(keys[x]); // Displays caption
</script>
</div>
<p><button class="button" onclick="window.location.reload()">NEXT Plant<br>(hover over slideshow to pause)</button></p>
<!-- Reloads page, advancing the slideshow, but is inefficient & causes flickering -->
</body>
</html>
花了一些时间来了解它是如何工作的..因此我刚刚做了一个函数 nextSlide 来重置重要的东西（你可能想做一些除了 random 虽然）因为你的其他功能完成了剩下的工作 :D
纯 random 下一张幻灯片使得同一张幻灯片被加载多次。如果你不希望那样（例如：顺序循环数组 ) 请在评论中告诉我，但就目前而言，您的代码无需重新加载即可运行
编辑：一切正常，哪里出了问题？
https://repl.it/talk/share/Testing/121825 has code forked from your repl(and I applied my below answer to it) and https://slideshow-code-needs-improving--paultaylor2.repl.co/ 会让您看到完整的选项卡示例（它可以工作，并更改图像）。所以我问，您遇到了什么问题？
我确实看到了一件事，值 specificResolution 与您在问题中给出的代码段和您在回复中提供的代码段有 2 个不同的东西。所以只需确保 specificResolution 检查 现有文件夹
//place this in a script tag SOMEWHERE AT THE BOTTOM LIKE BELOW BODY
var genusSpecies={"Adam's Needle (Yucca filamentosa)":["Adam's Needle (Yucca filamentosa)1.jpg"],"Virginia Wild Rye (Elymus virginicus)":["Virginia Wild Rye (Elymus virginicus)1.jpg","Virginia Wild Rye (Elymus virginicus)2.jpg"]};
/*HELLO, PLEASE MAKE SURE THIS VARIABLE HAS A VALID BEGINNING, since your example in the repl for this variable is DIFFERENT to the example I'm replicating from your question*/
/////////////////////////////////////////////////
if (window.innerHeight > 1000) {
window.specificResolution="./plants1220/"; // Higher-resolution photos for desktops
} else {
window.specificResolution="./plants500/"; // Lower-resolution photos for smartphones
}
/////////////////////////////////////////////////
var curimg=0;
var keys=Object.keys(genusSpecies); // Creates array of keys
var plantNumber=Object.keys(genusSpecies).length;
var rand=()=>Math.floor(Math.random() * (plantNumber));
var x=rand(); // Selects random index number for “keys” array, the element’s value providing a named key for “genusSpecies”
var plant=genusSpecies[keys[x]]; // Value of named key (image file names of specific mini-slideshow)
function swapImage()
{
document.getElementById("slide").setAttribute("src",specificResolution+plant[curimg])
curimg=(curimg<plant.length-1)? curimg+1 : 0; window.timer = setTimeout(swapImage,4000);
}
function stopShow()
{
clearTimeout(timer);
}
function runShow()
{
swapImage();
}
function nextSlide(){ //your other functions do the rest of work :D
x=rand(); curimg=0;
stopShow(); runShow();
plant=genusSpecies[keys[x]];
document.getElementsByClassName('caption')[0].innerText=(keys[x]);
}
document.getElementsByClassName('caption')[0].innerText=(keys[x]); // Displays caption
body {
display: flex;
justify-content: center;
text-align: center;
background-color: black;
}
img {
display: block;
position: relative;
top: 20px;
max-width:100%;
max-height:calc(100vh - 160px - ((.4em + .6vmin) + (.4em + .6vmax)));
object-fit: contain;
}
.caption {
position: absolute;
bottom: 120px;
font-size: calc((.4em + .6vmin) + (.4em + .6vmax));
color: white;
left: 0;
right: 0;
width: 100%;
text-align: center;
}
p {
position: absolute;
bottom: 10px;
left: 0;
right: 0;
width: 100%;
text-align: center;
}
.button {
border-radius: 8px;
background-color: green;
border: none;
color: black;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<title>Plant Slideshow</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body onLoad="runShow()">
<img id="slide" onmouseover="stopShow()" onmouseout="runShow()" src="" alt="">
<div class="caption"></div>
<p><button class="button" onclick="nextSlide()">NEXT Plant<br>(hover over slideshow to pause)</button></p>
<!-- Reloads page, advancing the slideshow, but is inefficient & causes flickering -->
</body>
</html>
我的幻灯片脚本使用 onclick 事件 window.location.reload() 前进到下一个迷你幻灯片，导致页面在单击“下一个植物”按钮时闪烁。
理想情况下，onclick 事件应触发一个功能来推进幻灯片放映，无需重新加载页面。
不幸的是，创建这样一个函数说起来容易做起来难。
直觉上，我的第一个想法是放弃 onclick 事件 window.location.reload() 方法，而是让 onclick 事件调用 onLoad 函数 runShow()，认为重新调用此脚本会推进幻灯片放映。没有。
重新调用其他功能也无法推进幻灯片，现在我不知道下一步该怎么做。
请指教。谢谢。
body {
display: flex;
justify-content: center;
text-align: center;
background-color: black;
}
img {
display: block;
position: relative;
top: 20px;
max-width:100%;
max-height:calc(100vh - 160px - ((.4em + .6vmin) + (.4em + .6vmax)));
object-fit: contain;
}
.caption {
position: absolute;
bottom: 120px;
font-size: calc((.4em + .6vmin) + (.4em + .6vmax));
color: white;
left: 0;
right: 0;
width: 100%;
text-align: center;
}
p {
position: absolute;
bottom: 10px;
left: 0;
right: 0;
width: 100%;
text-align: center;
}
.button {
border-radius: 8px;
background-color: green;
border: none;
color: black;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<title>Plant Slideshow</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body onLoad="runShow()">
<img id="slide" onmouseover="stopShow()" onmouseout="runShow()" src="" alt="">
<script>
var genusSpecies={"Adam's Needle (Yucca filamentosa)":["Adam's Needle (Yucca filamentosa)1.jpg"],"Virginia Wild Rye (Elymus virginicus)":["Virginia Wild Rye (Elymus virginicus)1.jpg","Virginia Wild Rye (Elymus virginicus)2.jpg"]};
if (window.innerHeight > 1000) {
var specificResolution="./plants1220/"; // Higher-resolution photos for desktops
} else {
var specificResolution="./plants500/"; // Lower-resolution photos for smartphones
}
var curimg=0;
var keys=Object.keys(genusSpecies); // Creates array of keys
var plantNumber=Object.keys(genusSpecies).length;
x=Math.floor(Math.random() * (plantNumber)); // Selects random index number for “keys” array, the element’s value providing a named key for “genusSpecies”
var plant=genusSpecies[keys[x]]; // Value of named key (image file names of specific mini-slideshow)
function swapImage()
{
document.getElementById("slide").setAttribute("src",specificResolution+plant[curimg])
curimg=(curimg<plant.length-1)? curimg+1 : 0; timer = setTimeout("swapImage()",4000);
}
function stopShow()
{
clearTimeout(timer);
}
function runShow()
{
swapImage();
}
</script>
<div class="caption">
<script>
document.write(keys[x]); // Displays caption
</script>
</div>
<p><button class="button" onclick="window.location.reload()">NEXT Plant<br>(hover over slideshow to pause)</button></p>
<!-- Reloads page, advancing the slideshow, but is inefficient & causes flickering -->
</body>
</html>
花了一些时间来了解它是如何工作的..因此我刚刚做了一个函数 nextSlide 来重置重要的东西（你可能想做一些除了 random 虽然）因为你的其他功能完成了剩下的工作 :D
纯 random 下一张幻灯片使得同一张幻灯片被加载多次。如果你不希望那样（例如：顺序循环数组 ) 请在评论中告诉我，但就目前而言，您的代码无需重新加载即可运行
编辑：一切正常，哪里出了问题？
https://repl.it/talk/share/Testing/121825 has code forked from your repl(and I applied my below answer to it) and https://slideshow-code-needs-improving--paultaylor2.repl.co/ 会让您看到完整的选项卡示例（它可以工作，并更改图像）。所以我问，您遇到了什么问题？
我确实看到了一件事，值 specificResolution 与您在问题中给出的代码段和您在回复中提供的代码段有 2 个不同的东西。所以只需确保 specificResolution 检查 现有文件夹
//place this in a script tag SOMEWHERE AT THE BOTTOM LIKE BELOW BODY
var genusSpecies={"Adam's Needle (Yucca filamentosa)":["Adam's Needle (Yucca filamentosa)1.jpg"],"Virginia Wild Rye (Elymus virginicus)":["Virginia Wild Rye (Elymus virginicus)1.jpg","Virginia Wild Rye (Elymus virginicus)2.jpg"]};
/*HELLO, PLEASE MAKE SURE THIS VARIABLE HAS A VALID BEGINNING, since your example in the repl for this variable is DIFFERENT to the example I'm replicating from your question*/
/////////////////////////////////////////////////
if (window.innerHeight > 1000) {
window.specificResolution="./plants1220/"; // Higher-resolution photos for desktops
} else {
window.specificResolution="./plants500/"; // Lower-resolution photos for smartphones
}
/////////////////////////////////////////////////
var curimg=0;
var keys=Object.keys(genusSpecies); // Creates array of keys
var plantNumber=Object.keys(genusSpecies).length;
var rand=()=>Math.floor(Math.random() * (plantNumber));
var x=rand(); // Selects random index number for “keys” array, the element’s value providing a named key for “genusSpecies”
var plant=genusSpecies[keys[x]]; // Value of named key (image file names of specific mini-slideshow)
function swapImage()
{
document.getElementById("slide").setAttribute("src",specificResolution+plant[curimg])
curimg=(curimg<plant.length-1)? curimg+1 : 0; window.timer = setTimeout(swapImage,4000);
}
function stopShow()
{
clearTimeout(timer);
}
function runShow()
{
swapImage();
}
function nextSlide(){ //your other functions do the rest of work :D
x=rand(); curimg=0;
stopShow(); runShow();
plant=genusSpecies[keys[x]];
document.getElementsByClassName('caption')[0].innerText=(keys[x]);
}
document.getElementsByClassName('caption')[0].innerText=(keys[x]); // Displays caption
body {
display: flex;
justify-content: center;
text-align: center;
background-color: black;
}
img {
display: block;
position: relative;
top: 20px;
max-width:100%;
max-height:calc(100vh - 160px - ((.4em + .6vmin) + (.4em + .6vmax)));
object-fit: contain;
}
.caption {
position: absolute;
bottom: 120px;
font-size: calc((.4em + .6vmin) + (.4em + .6vmax));
color: white;
left: 0;
right: 0;
width: 100%;
text-align: center;
}
p {
position: absolute;
bottom: 10px;
left: 0;
right: 0;
width: 100%;
text-align: center;
}
.button {
border-radius: 8px;
background-color: green;
border: none;
color: black;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<title>Plant Slideshow</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body onLoad="runShow()">
<img id="slide" onmouseover="stopShow()" onmouseout="runShow()" src="" alt="">
<div class="caption"></div>
<p><button class="button" onclick="nextSlide()">NEXT Plant<br>(hover over slideshow to pause)</button></p>
<!-- Reloads page, advancing the slideshow, but is inefficient & causes flickering -->
</body>
</html>