0

我在此页面上使用 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,
});
4

1 回答 1

2

From jQuery Cycle manual:

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

First you need to define pagerAnchorBuilder. Tthat will tell the script which elements it should use for links - so they are not autogenerated anymore. You also need to add allowPagerClickBubble so that the default action (page url) is triggered on click:

$('#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
});

Now, in your HTML code do this: 

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

Add URLs to the rest of anchors in that block and it will work.

Working demo (click the last link): JSfiddle

于 2013-01-03T19:11:44.700 回答