Question

我创建了my site的主页，这样当您将鼠标悬停在不同的服务产品上时，相关图像也会显示。然而，当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>

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

1 个答案: