Question

遇到了问题，无法理解这个问题并感谢您的帮助/指导。

我需要的功能：

每个菜单列表都包含点击时应滚动的图片。鼠标悬停时滚动。如果鼠标悬停，它将在设定的间隔时间限制内滚动图像。

一旦我滚动它然后我会寻求进一步的功能，但是如果它至少可以在这个时刻工作，我将不胜感激

终极功能：当鼠标输出可能包含使用.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>

Answer 1

如果您希望显示所有子UL，并且菜单悬停触发适用幻灯片的暂停/恢复，请尝试以下操作：

DEMO：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;
        });
    });
});

Jquery循环 - 嵌套ul li ul li每个列表中的多个图像（不同数量）

1 个答案: