按左右箭头可更改图像
Press left and right arrow to change image?
所以我有一个简单的幻灯片:
<div class="container">
<div id="slideshow">
<img alt="slideshow" src="1.jpg" id="imgClickAndChange" onclick="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>
问题是,当我按下右箭头(下一步)和左箭头我该怎么做 我试着添加了一个"onkeypress"事件,但似乎什么都不起作用。我做错了什么。我对javascript还很陌生,所以如果你能帮助我,那就太好了。谢谢:)
查看实际操作中的答案http://jsfiddle.net/7LhLsh7L/(fiddler注意:在按下箭头(左、右)键之前,它在编辑器中运行,您应该将焦点(只需单击结果区域)放在结果区域)
这是标记和脚本:
<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>
上述解决方案的特点:
- 如果您单击该图像,它将带您进入下一个图像,并在到达最后一个图像时重复该循环
- 对于左箭头(<-),它加载前一个图像,并在到达第一个图像时沿相反方向重复循环
- 右箭头(->)行为类似于单击
我自己解决这个问题的方法是:
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);
JS Fiddle演示。
参考文献:
- CCD_ 1
- 条件('ternary')运算符(
assessment ? ifTrue : ifFalse
) document.getElementById()
Event.keyCode
String.prototype.split()
String.prototype.toLowerCase()
您可以检测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
}
}
相关文章:
- 正确输入的文本会更改图像
- JCROP更改图像时重置纵横比
- 文本链接可更改引导程序选项卡
- 使用带有变量的javascript更改图像src
- 无法通过JQuery更改图像的src
- 单击时使用javascript更改图像大小
- setInterval可更改函数的背景
- whay可以't我使用javascript同时更改图像的高度和宽度
- 使用select更改图像和描述
- 在onmouseover事件中更改图像,并为每个事件设置中断/间隔
- 双击可更改树标签
- 正确输入的文本会更改图像
- 选择选项可更改图像的不透明度
- Jquery可拖动UI |将图像拖动到容器中时更改图像大小
- 一种 html 表单,可自动检测输入并相应地更改图像
- 尝试在悬停在可单击区域时更改图像
- 在画布中制作可单击区域以更改图像
- 单页滚动可更改图像效果(过渡)
- 按左右箭头可更改图像
- 使用Jquery根据可拖放对象的ID动态更改图像的src