1

我有两个 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 回答