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 回答