Question

我在此页面上使用jQuery Cycle进行幻灯片演示：http://energync.ehclients.com/并设置它以便在鼠标悬停在其下方的寻呼机事件时图像发生变化。由于这些链接是由jQuery动态创建的，我如何添加链接到网站上的其他页面？

这是html：

<div id="slideshow">
<img src="http://energync.ehclients.com/images/uploads/slideshow-1.jpg" alt="Making Energy Work" width="645" height="333">
<img src="http://energync.ehclients.com/images/uploads/slideshow-2.jpg" alt="We Collaborate" width="645" height="333">
<img src="http://energync.ehclients.com/images/uploads/slideshow-3.jpg" alt="We Analyze" width="645" height="333">
<img src="http://energync.ehclients.com/images/uploads/slideshow-4.jpg" alt="We Advocate" width="645" height="333">
<img src="http://energync.ehclients.com/images/uploads/slideshow-5.jpg" alt="We Educate" width="645" height="333">
</div>

这是jQuery：

$('#slideshow').cycle({
    fx: 'fade',
    pager : '#slideshow-nav',
    pagerEvent: 'mouseover',
    speed: 2000,
    delay:  3000,
});

Answer 1

来自jQuery Cycle manual：

pagerAnchorBuilder: null, // callback fn for building anchor links:  function(index, DOMelement)

首先，您需要定义pagerAnchorBuilder。这将告诉脚本它应该用于链接的元素 - 因此它们不再自动生成。您还需要添加allowPagerClickBubble，以便在单击时触发默认操作（页面URL）：

$('#slideshow').cycle({
    fx:     'fade',
    speed:  2000,
    delay: 3000,
    pager : '#slideshow-nav',
    pagerEvent: 'mouseover',
    pagerAnchorBuilder: function(idx, slide) {
        // return sel string for existing anchor
        return '#slideshow-nav ul li:eq(' + (idx) + ') a';
    },
    allowPagerClickBubble: true
});

现在，在您的HTML代码中执行以下操作：

    <div id="slideshow-nav">
             <ul>
            <li class="collaborate"><a href="">We Collaborate</a></li>
            <li class="analyze"><a href="">We Analyze</a></li>
            <li class="advocate"><a href="">We Advocate</a></li>
            <li class="educate"><a href="http://energync.ehclients.com/we-educate/">We Educate</a></li>
             </ul>
    </div>

将URL添加到该块中的其余锚点，它将起作用。

工作演示（点击最后一个链接）：JSfiddle

如何添加jQuery Cycle pagerEvent的链接？

1 个答案: