Question

所以我要做的就是创建两个函数，每个函数都与它们各自的按钮一起使用。该功能的目的是使包含图像的div通过数字图像旋转。当3向右旋转时，它在页面上留下可见图像堆栈，当1向左旋转时，同样的情况发生。当1向右旋转时，新图像会弹出到可见堆栈中。我已经写出了基本的JavaScript，但是当我点击按钮时没有任何反应。任何人都可以帮我解决这个问题吗？谢谢!!

#img1 {
        position: absolute;
        background-color: lightblue;
        height: 70px;
        width: 50px;
        z-index: 5;
        margin: auto;
        right: 45px;
    }

    #img2 {
        position: absolute;
        background-color: lightcoral;
        height: 70px;
        width: 50px;
        z-index: 10;
        left: 70px;
        right: 70px;
        top: 100px;
        margin: auto;
    }

    #img3 {
        position: absolute;
        background-color: lightgreen;
        height: 70px;
        width: 50px;
        z-index: 5;
        margin: auto;
        left: 45px;
    }

#rightArrow {
        position: absolute;
        left: 15px;
        bottom: 45px;
        width: auto;
        font-size: 24px;
        transform: rotate(180deg);

    }

    #rightArrow:hover {
        color: yellow;
    }

    #leftArrow {
        position: absolute;
        right: 15px;
        bottom: 45px;
        width: auto;
        font-size: 24px;
        transform: rotate(180deg);

    }

    #leftArrow:hover {
        color: yellow;
    }

<div>
<p id='leftArrow'>&cularr;</p>
<div id='img1' style="border: 2px solid blue;">1</div>
<div id='img2' style="border: 2px solid red;">2</div>
<div id='img3' style="border: 2px solid green;">3</div>
<p id='rightArrow'>&curarr;</p>

var myLeftArrow = document.querySelector("#rightArrow");
var myRightArrow = document.querySelector("#leftArrow");

myLeftArrow.addEventListener("click", rotateLeft(), false);

    function rotateLeft()
    {
        var set1 = document.getElementById('img1');
        var set2 = document.getElementById('img2');
        var set3 = document.getElementById('img3');
        set1.id = ('img3');
        set2.id = ('img1');
        set3.id = ('img2');
    }

    myRightArrow.addEventListener("click", rotateRight(), false);

    function rotateRight()
    {
        var set1 = document.getElementById('img1');
        var set2 = document.getElementById('img2');
        var set3 = document.getElementById('img3');
        set1.id = ('img2');
        set2.id = ('img3');
        set3.id = ('img1');
    }

Answer 1

问题在于你的听众。你应该在没有括号的情况下传递rotateLeft()和rotateRight()。请参阅下面的工作代码。

＆＃13;

var myLeftArrow = document.querySelector("#rightArrow");
var myRightArrow = document.querySelector("#leftArrow");

myLeftArrow.addEventListener("click", rotateLeft, false);

    function rotateLeft()
    {
        var set1 = document.getElementById('img1');
        var set2 = document.getElementById('img2');
        var set3 = document.getElementById('img3');
        set1.id = ('img3');
        set2.id = ('img1');
        set3.id = ('img2');
    }

    myRightArrow.addEventListener("click", rotateRight, false);

    function rotateRight()
    {
        var set1 = document.getElementById('img1');
        var set2 = document.getElementById('img2');
        var set3 = document.getElementById('img3');
        set1.id = ('img2');
        set2.id = ('img3');
        set3.id = ('img1');
    }

＆＃13;

#img1 {
        position: absolute;
        background-color: lightblue;
        height: 70px;
        width: 50px;
        z-index: 5;
        margin: auto;
        right: 45px;
    }

    #img2 {
        position: absolute;
        background-color: lightcoral;
        height: 70px;
        width: 50px;
        z-index: 10;
        left: 70px;
        right: 70px;
        top: 100px;
        margin: auto;
    }

    #img3 {
        position: absolute;
        background-color: lightgreen;
        height: 70px;
        width: 50px;
        z-index: 5;
        margin: auto;
        left: 45px;
    }

#rightArrow {
        position: absolute;
        left: 15px;
        bottom: 45px;
        width: auto;
        font-size: 24px;
        transform: rotate(180deg);

    }

    #rightArrow:hover {
        color: yellow;
    }

    #leftArrow {
        position: absolute;
        right: 15px;
        bottom: 45px;
        width: auto;
        font-size: 24px;
        transform: rotate(180deg);

    }

    #leftArrow:hover {
        color: yellow;
    }

＆＃13;

<p id='leftArrow'>&cularr;</p>
<div id='img1' style="border: 2px solid blue;">1</div>
<div id='img2' style="border: 2px solid red;">2</div>
<div id='img3' style="border: 2px solid green;">3</div>
<p id='rightArrow'>&curarr;</p>

＆＃13;

如何使我的旋转功能起作用？

1 个答案: