Как установить порядок для массивов, когда я нажимаю следующий и предыдущий на JavaScript?

1

Я хочу создать средство просмотра изображений, где вы нажимаете следующий и предыдущий, чтобы изменить изображение. Пока кнопки следующего и предыдущего меняют изображение. Однако, когда я нажимаю "Далее", затем "предыдущий", изображение не переходит к предыдущему изображению, вместо этого оно переходит к исходному изображению.

Я предполагаю создать переменную 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--;
    }

Теги:
arrays
sorting
image
onclick

1 ответ

1
Лучший ответ

Во-первых, я заметил, что вы меняете переменную 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' для использования в логике функции изменения. Это позволяет мне использовать только одну функцию для обеих кнопок. Надеюсь, это поможет.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню