私はValumsのスクロールスクリプト(http://valums.com/scroll-menu-jquery/)を動的に作成されたCycleプラグインのページネーションhttp://www.malsup.com/jquery/cycle/pager2.htmlに組み込もうとしています。基本的には、動的ページネーション(1,2,3 ...)をmousemoveでスクロールさせようとしています。jQuery:動的に生成されたリストアイテムをスクロール
だから、私はオリジナルのサイクルのデモコードがあります。
$( '#スライドショーを')( '')の前にサイクル({ FX: 'ターンダウン'、 スピード: '' 速く、 タイムアウト:0、 ページャ '#nav'
// callback fn that creates a thumbnail to use as pager anchor
pagerAnchorBuilder: function(idx, slide) {
return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>';
}
})。
そして私は、適用しようとしています:
$(関数(){ //は、高速アクセスのために私たちの要素を取得し、オーバーレイ幅 するvar DIV = $( 'のdiv#のナビゲーションバーを')に設定、 UL = $( '#ULのNAV')、 //順序なしリストの左余白 ulPadding = 15;
//Get menu width
var divWidth = div.width();
//Remove scrollbars
div.css({overflow: 'hidden'});
//Find last image container
var lastLi = ul.find('li:last-child');
//When user move mouse over menu
div.mousemove(function(e){
//As images are loaded ul width increases,
//so we recalculate it each time
var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
var left = (e.pageX - div.offset().left) * (ulWidth-divWidth)/divWidth;
div.scrollLeft(left);
});
});
問題があること:
VAR lastLi = ul.find( 'リー:最後の子');
すべての要素が動的に作成されるため、最後の要素が見つかりません。 #nav内の要素がmousemove上でスクロール可能になるようにスクリプトがどのようにバインドされるかについてのアイデアはありますか?