jQuery-如何基于mouseOver更改视图？

Question

我做的主页， 我的网站 ，这样，当你的鼠标在不同的服务产品相关图像也会显示。 但是，当Malsup对Cycle的托管脱离github时，该功能丢失了。

这是我以前使用过的代码，但现在无法正常工作。 幻灯片仍然循环播放，但是鼠标悬停功能无法正常工作。

<script type="text/javascript">
$(document).ready(function() {
$('#slideshow').cycle({
    fx: 'fade',
    pager : '#slideshow-nav',
    pagerEvent: 'mouseover',
    pauseOnPagerHover: true,
    speed: 1000,
    delay:  3000,
    timeout: 9000,
    pagerAnchorBuilder: function(idx, slide) {
    // return sel string for existing anchor
    return '.features ul li:eq(' + (idx) + ') a';
},
allowPagerClickBubble: true 
});
});
</script>

我需要进行哪些更改才能使其重新运行？

谢谢。

Answer 1

试试插件库的这个“命令”，它就能解决问题。

<script type="text/javascript">

$(document).ready(function(){

    $("#skills li").click(function(){

        id = $(this).attr('id');

        imgIndexToJump = id.substr(1); //extracting number as index from id
        imgIndexToJump = parseInt(imgIndexToJump, 10);

        $('.slideshow').cycle('goto', imgIndexToJump);
    });
});

</script>

在这样的技能中为您的列表分配ID，它将起作用。

<ul id="skills">
<li id="a0">
    a1-data
</li>
<li id="a2">
    a1-data
</li>
</ul>