jQuery - 如何基于鼠标悬停更改视图

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>