Я хочу создать средство просмотра изображений, где вы нажимаете следующий и предыдущий, чтобы изменить изображение. Пока кнопки следующего и предыдущего меняют изображение. Однако, когда я нажимаю "Далее", затем "предыдущий", изображение не переходит к предыдущему изображению, вместо этого оно переходит к исходному изображению.
Я предполагаю создать переменную var = newImage и использовать эту переменную в функции change2() и создать новую переменную var = newImage2 и использовать ее для функции change().
это возможно?
<!DOCTYPE html>
<html>
<head>
<title>JS ChangeImage</title>
</head>
<body>
<h1 align="center">Change Image</h1>
<br>
<div class= "container" align="center">
<button onclick="change2()">Previous</button>
<img src="html5.png" style="height: 500px; width: 500px" id="changeimg">
<button onclick="change()">Next</button>
</div>
</body>
<script>
var img=0;
var imgArr = ["html5.png","css3.png","javascript.png"]
function change() {
var image = document.getElementById('changeimg');
console.log("current image =>", imgArr[img])
document.getElementById('changeimg').src =imgArr[img];
if (img== 2) img = 0;
else
img++;
}
function change2() {
var c1=
document.getElementById('changeimg').src =imgArr[img];
console.log("current image =>", imgArr[img])
if (img== 0) img = 2;
else
img--;
}
Во-первых, я заметил, что вы меняете переменную img
после назначения изображения элементу. Я думаю, вы должны переключить заказ. Теперь, когда вы нажимаете "Далее", число продвигается вперед, но изображение связано с предыдущим номером. Если вы затем нажмете "Предыдущий", число уменьшится, но изображение появится вперед.
Я сделал некоторые другие изменения для простоты здесь:
HTML:
<h1 align="center">Change Image</h1>
<br>
<div class= "container" align="center">
<button onclick="change(event)" name='1'>Previous</button>
<img src="html5.png" style="width: 500px" id="changeimg">
<button onclick="change(event)" name='2'>Next</button>
</div>
JS:
var currentImg = 0;
const imgArr = ["html5.png","css3.png","javascript.png"]
const change=(event)=>{
if(event.target.name==='1'){
currentImg>0?currentImg--:currentImg=2;
} else if(event.target.name==='2'){
currentImg<imgArr.length-1?currentImg++:currentImg=0;
}
console.log(currentImg);
document.getElementById('changeimg').src = imgArr[currentImg];
}
Обратите внимание на использование атрибута 'name' для использования в логике функции изменения. Это позволяет мне использовать только одну функцию для обеих кнопок. Надеюсь, это поможет.