1
Я пишу небольшую галерею/страницу слайд-шоу, которая должна меняться через ее изображения с помощью клавиш со стрелками влево или вправо. В настоящее время код работает несколько, но не изменяется во всех его изображениях. Почему это? Как это можно исправить?Почему это слайд-шоу HTML/JavaScript не меняется во всех его изображениях?
изображений для испытания образца:
[
'http://i.imgur.com/co6MlSo.jpg',
'http://i.imgur.com/gCxcOKi.jpg',
'http://i.imgur.com/lsu7ZSw.jpg',
'http://i.imgur.com/pwysNhX.jpg'
];
Код:
<html>
<head>
<title>gallery</title>
<style type="text/css">
html, body{
background: #333333;
height: 100%;
margin: 0;
padding: 0;
font-family: Arial Black;
font-size: 18px;
line-height: 1.5;
text-align: justify;
}
img{
padding: 0;
display: block;
margin: 0 auto;
max-height: 100%;
max-width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div id="slideshow">
<img
alt="slideshow"
src="co6MlSo.jpg"
id="imgClickAndChange"
onclick="changeImage()"
/>
</div>
</div>
<script>
var images = [
"co6MlSo.jpg",
"gCxcOKi.jpg",
"lsu7ZSw.jpg",
"pwysNhX.jpg"
];
function changeImage(dir){
var img = document.getElementById("imgClickAndChange");
img.src = images[images.indexOf(img.src) + (dir || 1)] || images[dir ? images.length - 1 : 0];
}
document.onkeydown = function(e){
e = e || window.event;
if (e.keyCode == '37'){
changeImage(-1) // left to display previous image
}else if (e.keyCode == '39'){
// right to display next image
changeImage()
}
}
</script>
</body>
</html>
Я хотел бы использовать JQuery по щелчку вместо встроенного OnClick. Когда я возился, у меня возникла ошибка, что checkImage не определяется из-за вызова без параметров. Если вы используете jQuery, вы можете использовать условную логику. – yardpenalty