按左右箭头更改图像？ [英] Press left and right arrow to change image?

问题描述

所以我有这个简单的幻灯片：

 < div class =container> 
< div id =slideshow> 
< img alt =slideshowsrc =1.jpgid =imgClickAndChangeonclick =changeImage（）/> 
< / div> 
< / div> 
  

当我点击这样的图片时，我设法改变了图片：

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

问题是我还想要按下右箭头 b>（用于下一个）和左箭头（返回）。 我怎么做到这一点？我尝试添加一个onkeypress事件，但似乎没有任何工作。我做错了什么。我很新的JavaScript，所以如果你能帮助我，这将是伟大的。谢谢：） 解决方案

请参阅 http://jsfiddle.net/7LhLsh7L/ （注意fiddler：因为它在按下箭头（左键，右键）之前在编辑器中运行，所以应该给焦点（只需单击结果区域）到结果区）

以下是标记和脚本：

 < div class =container> 
< div id =slideshow> 
< img alt =slideshowsrc =http://thumb7.shutterstock.com/photos/thumb_large/253822/156271139.jpgid =imgClickAndChangeonclick =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<  - 显示上一张图片
} else if（e.keyCode =='39' ）{
 // right  - >显示下一张图片
 changeImage（）
} 
} 
< / script> 
  

上述解决方案的功能：

• 如果您点击图片，它会带您到下一张图片，并在它重复循环时到达最后一张图像。


• 对于向左箭头（< ;-)，它会加载上一张图像，循环在到达第一张图像时反向重复。箭头（ - >）行为与点击类似。

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 :)

解决方案

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)

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.

这篇关于按左右箭头更改图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！