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 に答える