所以我有这个代码。我做错事了。我希望左箭头返回(显示上一张图像),但它不起作用。它显示下一个图像(如右箭头)。无论我单击什么箭头,无论向左还是向右,它都会显示下一张图像。我尝试了数百万种不同的方法,但似乎找不到问题所在。谁能帮我吗?
我也喜欢循环播放源。当到达数组中的最后一个源时,我想再次循环回到第一个源(当到达第一个源时,返回到最后一个源)。
顺便说一句,我还有一个用于在单击时更改图像的代码。我很确定它与问题无关,但我决定保留它,以防万一它搞砸了。
谢谢:)
HTML:
<div class="container">
<div id="slideshow">
<img alt="slideshow" src="1.jpg" id="imgClickAndChange" onclick="changeImage()"/>
</div>
</div>
JS:
<script>
var imgs = ["2.jpg", "3.jpg", "4.jpg", "5.jpg"];
function changeImage(dir) {
var img = document.getElementById("imgClickAndChange");
img.src = imgs[imgs.indexOf(img.src) + (dir || 1)] || imgs[dir ? imgs.length - 1 : 0];
}
document.onkeydown = function(e) {
e = e || window.event;
if (e.keyCode == '37') {
changeImage(-1) //left <- show Prev image
} else if (e.keyCode == '39') {
changeImage() // right -> show next image
}
}
</script>
<script language="javascript">
var imgs = ["2.jpg", "3.jpg", "4.jpg", "5.jpg"];
function changeImage() {
document.getElementById("imgClickAndChange").src = imgs[0];
imgs.push(imgs.shift())
}
</script>
最佳答案
你的方向是正确的,但你犯了一些错误:
- 您有两个同名的变量。
- 您有两个同名的函数。
- 如果函数需要参数,则必须始终发送参数(或
null
),不能仅向左发送-1
,而对右不发送任何内容。 (就您而言,如果不发送正确的1
,实际上会让您自己变得更加困难)。 || imgs[目录? imgs.length - 1 : 0]
,并没有按照您的想法进行操作。您正在检查dir
,就好像它是一个 bool 值一样。 JavaScript 可以将1
和-1
解释为 bool 值(分别为true
和false
),但因为您只发送-1
它将无法正常工作。
以下是已修复这些问题的代码:
<小时/>JS、HTML:
var imgs = ["/image/NjC6V.jpg",
"/image/0eBBQ.gif",
"/image/uhjjB.png",
"/image/cNhjf.jpg",
"/image/Dn175.png"];
document.onkeydown = function(event) {
var e = event || window.event;
if (e.keyCode == '37') { //LEFT
changeImage(-1);
} else if (e.keyCode == '39') { //RIGHT
changeImage(1);
}
}
function changeImage(dir) {
var img = document.getElementById("imgClickAndChange");
img.src = imgs[imgs.indexOf(img.src)+dir] || imgs[(dir==1) ? 0 : imgs.length-1];
}
#imgClickAndChange {
width: 150px;
height: 150px;
}
<div class="container">
<div id="slideshow">
<img id="imgClickAndChange" src="/image/NjC6V.jpg" alt="" onclick="changeImage(1)" />
</div>
</div>
- 在三元运算符中,您可以使用
dir
而不是(dir==1)
,因为 JavaScript 将1
转换为true
。但使用(dir==1)
更安全,因为这将创建一个真正的 bool 值。 - 我用实际存在的图像链接替换了
imgs
数组中的图像,以便脚本正常运行而不会出现任何错误。 - 我添加了一些 CSS,这只是为了答案,以便所有图像具有相同的大小。
如果您不希望图像循环,请将 changeImage()
函数更改为:
function changeImage(dir) {
var img = document.getElementById("imgClickAndChange");
var newSrc = imgs[imgs.indexOf(img.src)+dir];
if (imgs.indexOf(newSrc) != -1) { //only sets new src if it's in the imgs-array (i.e. if it exists)
img.src = newSrc;
}
}
( fiddle :http://jsfiddle.net/k3wxhc58/9/ )
关于javascript - 按键时的幻灯片无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26573330/