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

我制作了的主页，这样当您将鼠标悬停在不同的服务选项上时，相关的图像也会显示出来。然而，当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>

$（文档）.ready（函数（）{
$（“#幻灯片放映”）。循环({
外汇：“淡出”，
寻呼机：“#幻灯片导航”，
pagerEvent:“鼠标悬停”，
是的，
速度：1000，
延误：3000，
超时：9000，
pagerAnchorBuilder:函数（idx、幻灯片）{
//返回现有锚点的sel字符串
return'.ulli:eq（+（idx）+'）a'；
},
allowPagerClickBubble:true
});
});

我需要做哪些更改才能使其重新工作

---

谢谢。

试试这个插件库的“命令”，它会成功的

<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>

$（文档）.ready（函数（）{
$（“#技能li”）。单击（函数（）{
id=$（this.attr（'id'）；
imgIndexToJump=id.substr（1）；//从id中提取数字作为索引
imgIndexToJump=parseInt（imgIndexToJump，10）；
$（'.slideshow'）.cycle（'goto'，imgIndexToJump）；
});
});

将ID分配到您的技能列表中，这样就可以了

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

a1数据


a1数据

Hi Bsienn，我尝试了上面的代码，所有幻灯片都同时显示在彼此的顶部，因此我认为缺少了一些内容。我在jquery selector中使用了类，请将$（“.slideshow”）更改为$（“#slideshow”），让我再次更新我的ans。它仍然不起作用。在检查代码时，我认为可能对应该发生的事情有一些误解。幻灯片现在显示正常，并正确循环播放。缺少的是鼠标盖，它使幻灯片放映前进到所选幻灯片，而不仅仅是暂停或继续。是的，我误解了，我想你只是需要暂停。请让我看看是否能想出一个解决办法。另一件事是你需要为每个元素指定id，这样我们就可以跳到那张幻灯片上了。最初的代码是在Github上找到的，并且被移动了。所以我从网站上下载了最新版本，现在一切正常。我感谢你的帮助。非常感谢。