Question

当我单击箭头时，我可以幻灯片显示图像，我正在播放幻灯片，但是它的顺序不正确？如果条件只在左箭头点击并且我得到了＆＃39; - ＆＃39;我点击时的值，两个箭头的条件没有正确排序，因为两者都不能保持正确的顺序？

＆＃13;

var selectingImages = document.getElementsByClassName("class1");
var clickArrowright = document.getElementById("arrowRight");
var clickArrowleft = document.getElementById("arrowLeft");
var i = 0;

clickArrowright.addEventListener('click', arrowHandler, true)

function arrowHandler(e) {
    console.log(i)
    i = (i < selectingImages.length) && (i >= 0) ? i : 0;

    if (i < selectingImages.length) {
        var getingAtri = selectingImages[i].getAttribute("src");
        document.getElementById("firstImage").setAttribute("src", getingAtri);
        i++;
    }

}

/* var i=selectingImages.length; */

clickArrowleft.addEventListener('click', arrowlefthandler, true)

function arrowlefthandler(e) {
    console.log(i)
    i = i > 0 ? i : selectingImages.length - 1;
    if (i > 0) {
        var getingAtri = selectingImages[i].getAttribute("src");
        document.getElementById("firstImage").setAttribute("src", getingAtri);
        i--;
    }
}

＆＃13;

.first-image {
    position: relative;
}

.arrow-left {
    position: absolute;
    top: 50%;
    left: 0%;
}

.arrow-right {
    position: absolute;
    top: 50%;
    left: 45%;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="style.css"rel="stylesheet">
    <title>Document</title>
   
</head>

<body>

    <img src="images/nature.jpeg" class="first-image" id="firstImage" width="50%">


    <img src="images/bigarrowleft.png" class="arrow-left" id="arrowLeft">
    <img src="images/bigarrowright.png" class="arrow-right" id="arrowRight">
    <br>
    <br>


    <img src="images/blank.jpg" class="class1" width="10%">
    <img src="images/blank2.jpg" class="class1" width="10%">
    <img src="images/form.jpg" class="class1" width="10%">
    <img src="images/form2.jpg" class="class1" width="10%">
    <img src="images/cricket.jpeg" class="class1" width="10%">
    <img src="images/image.jpeg" class="class1" width="10%">



    <script src="app.js">
       
    </script>
</body>

</html>

＆＃13;

Answer 1

您在左箭头中设置i的条件是否正确（i永远不会达到selectedImages.length - 1），请将其设为

i = i > 0 ? i - 1 : selectingImages.length - 1; // after ? i should be i - 1

此后不需要条件和减量，只需将其设为

即可

i = i > 0 ? i - 1 : selectingImages.length - 1; 
var getingAtri = selectingImages[i].getAttribute("src");
document.getElementById("firstImage").setAttribute("src", getingAtri);

同样适用于右箭头

i = i < selectingImages.length - 1 ? i + 1 : 0; //i+1 after question mark and single condition is enough
var getingAtri = selectingImages[i].getAttribute("src");
document.getElementById("firstImage").setAttribute("src", getingAtri);

使用javascript

1 个答案: