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

遇到问题，无法理解此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>

文件夹







页脚

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

演示：

---

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

演示：

---

您希望5个幻灯片全部可见，或者根据悬停？1个幻灯片显示所有幻灯片，一次只显示一个。例如，当鼠标悬停在菜单UL LI编号1上时，将显示图像1、2和3。此外，如果可能，当单击菜单UL LI No.1时，在1、2、3之间循环。您希望5个幻灯片全部可见，或者基于悬停？1个幻灯片，一次只显示一个，以显示所有幻灯片。例如，当鼠标悬停在菜单UL LI编号1上时，将显示图像1、2和3。如果可能的话，也可以在点击菜单UL LI编号1时循环浏览1、2、3篇文章。但我不想显示所有的sub ul。每个菜单UL将有一个主分区、5个菜单UL和多个图像。例如，在菜单UL中滚动1将触发悬停，第一个UL组中的图像将循环显示。在菜单中单击1也将在图像中循环（如果可能）。关闭鼠标应停止循环，以避免同时进行多个循环。如果有什么我能帮忙的，请告诉我。非常感谢您的时间和帮助！这个版本可能更符合您的需求。诀窍是超宽的幻灯片放映包装元素，所以当循环被调用时，所有的幻灯片放映都不会被隐藏，并且可以设置适当的宽度。再次感谢！这正是我想要的谢谢！。。。我希望我的报告是对的。嘿，再一次，我需要修改一下，我试着自己做，但没有成功。基本上我需要在菜单中显示一个不会滑动的图像的Li…我基本上尝试返回null。此外，在幻灯片放映中只添加一张图像也有问题。您有什么建议？（如果你能帮忙的话）谢谢你的帖子。但我不想显示所有的sub ul。每个菜单UL将有一个主分区、5个菜单UL和多个图像。例如，在菜单UL中滚动1将触发悬停，第一个UL组中的图像将循环显示。在菜单中单击1也将在图像中循环（如果可能）。关闭鼠标应停止循环，以避免同时进行多个循环。如果有什么我能帮忙的，请告诉我。非常感谢您的时间和帮助！这个版本可能更符合您的需求。诀窍是超宽的幻灯片放映包装元素，所以当循环被调用时，所有的幻灯片放映都不会被隐藏，并且可以设置适当的宽度。再次感谢！这正是我想要的谢谢！。。。我希望我的报告是对的。嘿，再一次，我需要修改一下，我试着自己做，但没有成功。基本上我需要在菜单中显示一个不会滑动的图像的Li…我基本上尝试返回null。此外，在幻灯片放映中只添加一张图像也有问题。您有什么建议？（如果你能帮忙的话。）

/* 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;
        });
    });
});