1

問題が発生しました。この jquery について頭を悩ませることができません。あなたの助け/ガイダンスをいただければ幸いです。

必要な機能:

各メニュー リストには、クリックしたときにスクロールし、マウス オーバーしたときにスクロールする画像が含まれています。マウスをホバーすると、設定された間隔の制限時間内に画像がスクロールされます。

スクロールしたら、さらに機能を探しますが、少なくとも現時点で機能することができれば幸いです

究極の機能: マウスアウト時にアニメーションを停止するには、.wrap を使用したより効率的なコーディングが含まれる可能性があり、マウスが画像 div の上にあるときに画像を一時停止することもできます。

ここに私が書いたJqueryがありますが、うまくいきません。

    $(function() {
    $('.main-img ul').cycle({
        fx: 'fadeout',
        height:      458,
        speed:       300,
        timeout:     0,
        pager:'.menu ul li',
        pagerEvent: 'click',
        pagerAnchorBuilder: function(idx, slide) { 
            return '.menu ul li:eq(' + idx + ') a'; 
        },
        after: function(){
            // start new sub animaion
        },
        before: function(){
            // stop the current animation
        }

    });
});/*

ここにhtmlがあります

        <div class="main-cont">
        <div class="menu">
            <div class="portfolio"><span>Portfolio</span></div>
            <ul>
                <li><a href="#" class="camp-txt"><span>One</span></a></li>
                <li><a href="#" class="edit-txt"><span>Two</span></a></li>
                <li><a href="#" class="ad-txt"><span>Three</span></a></li>
                <li><a href="#" class="bio-txt"><span>Four</span></a></li>
                <li><a href="#" class="vid-txt"><span>Five</span></a></li>
            </ul>
            <div class="footer"><span>Footer</span></div>
        </div>
        <div class="main-img">
            <ul>
                <li><ul>
                    <li><img src="images/port/1.jpg" width="597" height="453" alt="img"  /></li>
                    <li><img src="images/port/2.jpg" width="597" height="453" alt="img"  /></li>
                    <li><img src="images/port/3.jpg" width="597" height="453" alt="img"  /></li>
                </ul></li>
                <li><ul>
                    <li><img src="images/port/4.jpg" width="597" height="453" alt="img"  /></li>
                    <li><img src="images/port/5.jpg" width="597" height="453" alt="img"  /></li>
                    <li><img src="images/port/6.jpg" width="597" height="453" alt="img"  /></li>
                </ul></li>
                <li><ul>
                    <li><img src="images/port/7.jpg" width="597" height="453" alt="img"  /></li>
                    <li><img src="images/port/8.jpg" width="597" height="453" alt="img"  /></li>
                </ul></li>
                <li><ul>
                    <li><img src="images/port/9.jpg" width="597" height="453" alt="img"  /></li>
                    <li><img src="images/port/10.jpg" width="597" height="453" alt="img"  /></li>
                </ul></li>
               <li><ul>
                    <li><img src="images/port/11.jpg" width="597" height="453" alt="img"  /></li>
                    <li><img src="images/port/12.jpg" width="597" height="453" alt="img"  /></li>
                </ul></li>
            </ul>
        </div>
4

1 に答える 1

1

すべてのサブ UL を表示し、メニュー ホバーで該当するスライドショーの一時停止/再開をトリガーする場合は、次のようにします。

デモ: http://jsfiddle.net/Gq8uu/2/

/* set options for all slideshows */
var cycleOpts={
   timeout: 2000,
    manualTrump:true    
}

$(function() {
    var $menu_items = $('.menu li');
    var $shows = $('.main-img li ul')

    $shows.each(function(idx) {
        var $sho = $(this);
        /* create slidshow and set to pause*/
        $sho.cycle(cycleOpts).cycle('pause');
        /* menu hover pause/resume show*/
        $menu_items.eq(idx).on('mouseenter mouseleave', function(evt) {
            var action = evt.type == 'mouseenter' ? 'resume' : 'pause';
            $sho.toggleClass('active').cycle(action);
        /* menu click for next slide*/  
        }).click(function(){
            $sho.cycle('next');
            return false;
        });
    });
});
于 2012-06-16T18:15:12.817 に答える