1

以下に示すように、2つのjs関数があります。関数nexPageは正常に機能していますが、イベントwebkitAnimationEndを呼び出すとpreviousPage関数が期待どおりに機能しません。jsfiddleへのリンク：jsfiddleへのリンク

var currentPage = 0;
    function nextPage()
    {   
        alert(currentPage);
        var pages   = document.getElementsByClassName('pages');
        pages[currentPage].className = "pages pageanim";
        pages[currentPage].addEventListener('webkitAnimationEnd', function(){
        this.style.left     = '0%';
        this.style.zIndex   = currentPage;
        currentPage = currentPage+1;
    }, false);

}

    function previousPage()
    {   
        //alert(currentPage);
        var pages   = document.getElementsByClassName('pages pageanim');
        pages[0].className = "pages revpageanim";

        pages[0].addEventListener('webkitAnimationEnd', function(){
        this.style.left     = '49%';
        this.style.zIndex   = currentPage+1;
        currentPage = currentPage-1;
    }, false);
    }

これが私のhtmlです

  <body onLoad="applyZindex();">
   <!-- Add your site or application content here -->
  <header><button class="nav left" onClick="previousPage();">&lt;&lt;prev</button>
<h3 class="left">Previewer (TM)
</h3><button class="nav right" onClick="nextPage();">
next>></button></header>
            <section style=" position:relative;">
            <img src="img/1.jpg" alt="page1" title="page1" class="pages" />
            <img src="img/2.jpg" alt="page2" title="page2" class="pages" />
            <img src="img/3.jpg" alt="page1" title="page1" class="pages" />
            <img src="img/4.jpg" alt="page2" title="page2" class="pages"  />
            </section>
            <footer></footer>
        </body>
4

1 に答える 1

1

http://jsfiddle.net/K8Tuy/28/ここに行きます。

したがって、removeEventListenerクリックするたびに行う必要がありaddEventListenerます。addEventListener一般的に、クリックするたびに行うのは良い考えではありません。一度初期化する必要があり、ロジックはボタンの内側にある必要があります。

var currentPage = 0;
    function nextPage()
    {   
        var pages   = document.getElementsByClassName('pages');
        pages[currentPage].className = "pages pageanim";
        pages[currentPage].addEventListener('webkitAnimationEnd', function(){
            this.style.left     = '0%';
            this.style.zIndex   = currentPage;
            pages[currentPage].className = "pages";
            currentPage = currentPage+1;
            this.removeEventListener('webkitAnimationEnd',arguments.callee,false);
            console.log(currentPage);
        }, false);

}

    function previousPage()
    {   
        //alert(currentPage);
        var pages   = document.getElementsByClassName('pages');
        page = pages[currentPage-1];
        page.className = "pages revpageanim";

        page.addEventListener('webkitAnimationEnd', function(){
            currentPage = currentPage-1;
            this.style.left     = '49%';
            page.style.zIndex   = pages.length-currentPage;
            page.className = "pages";
            this.removeEventListener('webkitAnimationEnd',arguments.callee,false);
            console.log(currentPage);
        }, false);
    }​

編集： http ：
//jsfiddle.net/K8Tuy/35/-arguments.callee「関数名」に置き換え

于 2012-10-03T05:45:09.510 に答える