0

我的应用程序中有一个 jQuery Mobile 轮播，一旦轮播被翻转，我需要在下拉列表中填充数据，这就完成了。现在新的实现是，一旦用户在轮播上暂停 >= 3 秒，那么只有下拉菜单应该被更新。那么我该如何捕捉这个暂停时间呢？我正在使用 iscroll.js

代码中有趣的部分是：

var myScroll;
var old_page=0;
function loaded() {
    myScroll = new iScroll('wrapper', {
        snap: true,
        momentum: false,
        hScrollbar: false,
        onScrollEnd: function(){
            var currPage = myScroll.currPageX+1;
            var firstPage = parseInt(document.querySelector('#indicator > li:first-child').innerHTML);
            var lastPage = parseInt(document.querySelector('#indicator > li:last-child').innerHTML);
            if(currPage <= lastPage && currPage >= firstPage){
                if(old_page < currPage){
                    document.querySelector('#indicator > li.active').className = '';
                    document.querySelector('#indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active';
                    document.getElementById("prev").style.visibility="visible";
                }
                else if(old_page > currPage){
                    document.querySelector('#indicator > li.active').className = '';
                    document.querySelector('#indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active';
                    document.getElementById("next").style.visibility="visible";
                }
                old_page = currPage;
                if(old_page == lastPage ){
                    document.getElementById("next").style.visibility="hidden";
                }
                else if(old_page == firstPage ){
                    document.getElementById("prev").style.visibility="hidden";
                }
            }
            else{
                myScroll.scrollToPage(lastPage-1,0);
            }
        }
    });
}

function gotoNextPage(){
    if(document.getElementById("prev").style.visibility == "hidden"){
        document.getElementById("prev").style.visibility="visible";
    }
    var currPage = parseInt(document.querySelector('#indicator > li.active').innerHTML);
    var lastPage = parseInt(document.querySelector('#indicator > li:last-child').innerHTML);

    if( currPage == (lastPage-1) ){
        document.getElementById("next").style.visibility="hidden";
    }
    document.querySelector('#indicator > li.active').className = '';
    document.querySelector('#indicator > li:nth-child(' + (currPage+1) + ')').className = 'active';
    myScroll.scrollToPage('next', 750);
}

function gotoPrevPage(){
    if(document.getElementById("next").style.visibility == "hidden"){
        document.getElementById("next").style.visibility="visible";
    }
    var currPage = parseInt(document.querySelector('#indicator > li.active').innerHTML);
    var firstPage = parseInt(document.querySelector('#indicator > li:first-child').innerHTML);
    if( (currPage-1) == firstPage ){
        document.getElementById("prev").style.visibility="hidden";
    }
    document.querySelector('#indicator > li.active').className = '';
    document.querySelector('#indicator > li:nth-child(' + (currPage-1) + ')').className = 'active';
    myScroll.scrollToPage('prev', 750);
}

document.addEventListener('DOMContentLoaded', loaded, false);
4

1 回答 1

0

整理并添加附加功能我得到了这个：

function loaded() {
    var $$ = document.querySelector;
    var firstPage = parseInt($$('#indicator > li:first-child').innerHTML, 10);
    var lastPage = parseInt($$('#indicator > li:last-child').innerHTML, 10);
    var myScroll = new iScroll('wrapper', {
        snap: true,
        momentum: false,
        hScrollbar: false,
        onScrollEnd: function() {
            var currPage = myScroll.currPageX + 1;
            if(currPage <= lastPage && currPage >= firstPage) {
                $$('#indicator > li.active').className = '';
                $$('#indicator > li:nth-child(' + currPage + ')').className = 'active';
                document.getElementById("prev").style.visibility = (currPage == firstPage) ? "hidden" : "visible";
                document.getElementById("next").style.visibility = (currPage == lastPage)  ? "hidden" : "visible";
            }
            else {
                myScroll.scrollToPage(lastPage-1,0);
            }
        }
    });
    var hoverTimeout;
    var wrapper = document.getElementById('wrapper');
    var items = wrapper.getElementsByTagName("???");
    for(var i=0; i<items.length; i++) {
        var item = items[i];
        item.onmouseover = function() {
            var that = this;
            hoverTimeout = setTimeout(function() {
                updateDropdown(that);//adjust this statement to call existing function
            }, 3000);
        };
        item.onmouseout = function() {
            clearTimeout(hoverTimeout);
        };
    }
}

要使其正常工作，您需要：

  • 在var items = ...语句中，更改???为包装内滚动元素的标记名称（例如“img”）。
  • 在setTimeout(...)语句中，调用一些更新下拉列表的现有函数。

编辑

在 jQuery 中，它会是这样的：

$(function() {
    var $wrapper = $('#wrapper'),
        $indicatorElements = $('#indicator li'),
        $prev = $("#prev"),
        $next = $("#next"),
        hoverTimeout;
    var myScroll = new iScroll('wrapper', {
        snap: true,
        momentum: false,
        hScrollbar: false,
        onScrollEnd: function() {
            var currPage = this.currPageX;
            if(currPage <= ($indicatorElements.length-1) && currPage >= 0) {
                $indicatorElements.removeClass('active').eq(currPage).addClass('active');
                $prev.css('visibility', (currPage == 0) ? "hidden" : "visible");
                $next.css('visibility', (currPage == ($indicatorElements.length-1))  ? "hidden" : "visible");
            }
            else {
                this.scrollToPage($indicatorElements.length-1, 0);
            }
        }
    });
    $wrapper.find("img").each(function(i, item) {
        $(item).hover(function() {
            hoverTimeout = setTimeout(function() {
                updateDropdown(item);//adjust this statement to call existing function
            }, 3000);
        }, function() {
            clearTimeout(hoverTimeout);
        };
    });
});

两个版本都未经测试，可能需要调试。

于 2012-07-25T10:37:59.347 回答