Jquery cycle - 嵌套 ul li ul li 每个列表中的多个图像(不同数量)

Question

遇到了一个问题，无法理解这个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>

Answer 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;
        });
    });
});