javascript 按左右箭头更改图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26443828/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Press left and right arrow to change image?
提问by Owly
So I have this simple slideshow:
所以我有这个简单的幻灯片：
<div class="container">
<div id="slideshow">
<img alt="slideshow" src="1.jpg" id="imgClickAndChange" onclick="changeImage()" />
</div>
</div>
I have managed to make the images change when I click like this:
当我像这样单击时，我设法使图像发生了变化：
<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>
The problem is I also want the images to change when I press the right arrow(for next) and left arrow(to go back). How can I do this?I've tried adding an "onkeypress" event but nothing seems to work. I'm doing something wrong. I'm pretty new to javascript so if you can help me it would be great. Thank you :)
问题是当我按下右箭头（下一个）和左箭头（返回）时，我还希望图像发生变化。我怎样才能做到这一点？我试过添加一个“onkeypress”事件，但似乎没有任何效果。我做错了什么。我对 javascript 很陌生，所以如果你能帮助我，那就太好了。谢谢 ：）
回答by Koti Panga
See the answer in action http://jsfiddle.net/7LhLsh7L/(note for fiddler: as it runs in editor itself before pressing arrow(left, right) keys, you should give focus(just click result area) to result area)
在操作中查看答案http://jsfiddle.net/7LhLsh7L/（提琴手注意：因为它在按箭头（左，右）键之前在编辑器中运行时，您应该将焦点（只需单击结果区域）放在结果区域）
Here is the markup and script:
这是标记和脚本：
<div class="container">
<div id="slideshow">
<img alt="slideshow" src="http://thumb7.shutterstock.com/photos/thumb_large/253822/156271139.jpg" id="imgClickAndChange" onclick="changeImage()" />
</div>
</div>
<script>
var imgs = ["http://thumb7.shutterstock.com/photos/thumb_large/253822/156271139.jpg", "http://thumb9.shutterstock.com/photos/thumb_large/554278/132632972.jpg", "http://thumb7.shutterstock.com/photos/thumb_large/101304/133879079.jpg", "http://thumb101.shutterstock.com/photos/thumb_large/422038/422038,1327874090,3.jpg", "http://thumb1.shutterstock.com/photos/thumb_large/975647/149914934.jpg", "http://thumb9.shutterstock.com/photos/thumb_large/195826/148988282.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') {
// right -> show next image
changeImage()
}
}
</script>
The features of above solution:
上述解决方案的特点：
- If you click on the image, it'll take you to next image and repeats the cycle when it reaches last image.
- For Left arrow(<-) it loads previous image and cycles repeats in reverse direction when reaches first image.
- Right arrow(->) behavior is similar to click.
- 如果您单击图像，它将带您到下一张图像，并在到达最后一张图像时重复循环。
- 对于左箭头（<-），它加载前一个图像，并在到达第一个图像时以相反的方向循环重复。
- 右箭头 (->) 行为类似于单击。
回答by David says reinstate Monica
My own approach to the problem, while you've already accepted an answer, would be:
虽然您已经接受了答案，但我自己解决这个问题的方法是：
function imgCycle(e) {
// obviously use your own images here:
var imgs = ['nightlife', 'people', 'sports', 'cats'],
// reference to the img element:
imgElement = document.getElementById('imgClickAndChange'),
// finding the string of the src after the last '/' character:
curImg = imgElement.src.split('/').pop(),
// finding that string from the array of images:
curIndex = imgs.indexOf(curImg),
// initialising the nextIndex variable:
nextIndex;
// if we have a keyCode (therefore we have a keydown or keyup event:
if (e.keyCode) {
// we do different things based on which key was pressed:
switch (e.keyCode) {
// keyCode 37 is the left arrow key:
case 37:
// if the current index is 0 (the first element in the array)
// we next show the last image in the array, at position 'imgs.length - 1'
// otherwise we show the image at the previous index:
nextIndex = curIndex === 0 ? (imgs.length - 1) : curIndex - 1;
break;
// keyCode 39 is the right arrow key:
case 39:
// if curIndex + 1 is equal to the length of the images array,
// we show the first element from the array, otherwise we use the next:
nextIndex = curIndex + 1 === imgs.length ? 0 : curIndex + 1;
break;
}
// if we don't have a keyCode, we check if the event-type (in lowercase)
// is a mousedown:
} else if (e.type.toLowerCase() === 'mousedown') {
// I'm assuming you'd like to advance to the next image, rather
// than regress to the previous (same check as above):
nextIndex = curIndex + 1 === imgs.length ? 0 : curIndex + 1;
}
// setting the src of the image to the relevant URL + the string from the array
// at the 'nextIndex':
imgElement.src = 'http://lorempixel.com/200/200/' + imgs[nextIndex];
}
// binding a mousedown event-handler to the 'img' element:
document.getElementById('imgClickAndChange').addEventListener('mousedown', imgCycle);
// binding the keydown event-handler to the 'body' element:
document.body.addEventListener('keydown', imgCycle);
References:
参考：
回答by Tim
You can detect arrow key presses in JavaScript and then attach each key to an event. This SO answershows how it's done but essentially:
您可以检测 JavaScript 中的箭头键按下，然后将每个键附加到一个事件。这个 SO 答案显示了它是如何完成的，但本质上是：
document.onkeydown = checkKey;
function checkKey(e) {
e = e || window.event;
if (e.keyCode == '37') {
// left arrow
}
else if (e.keyCode == '39') {
// right arrow
}
}
