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

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

0 голосов
/ 19 сентября 2018

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

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

1 Ответ

0 голосов
/ 19 сентября 2018

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...