Question

我已经成功安装了Jquery的Cycle插件，让我的横幅以我想要的方式循环。我的问题是建立锚点。我正在尝试构建类似于http://www.bazaarvoice.com的东西。

似乎锚是从javascript生成的，但我可能是错的。这是我的HTML和JavaScript。

HTML

<div id="slideshow">
        <ul class="pager">
            <!-- will be populated with thumbs by JS -->
        </ul>
        <!-- each div is considered as a slide show -->
        <div><img src="/images/banner1.png" />You can place text here too !</div>
        <div><img src="/images/banner2.png" />and here</div>
        <div><img src="/images/banner3.png" />and even here</div>
    </div><!-- close #slideshow -->
<div id="tabs"></div>

的Javascript

$("#slideshow").cycle({ 
    fx:           'fade',  // name of transition effect (or comma separated names, ex: fade,scrollUp,shuffle) 
    timeout:       5000,   // milliseconds between slide transitions (0 to disable auto advance) 
    speed:         400,    // speed of the transition (any valid fx speed value) 
    pager:         "#tabs",// selector for element to use as pager container 
    pagerClick:    null,  // callback fn for pager clicks:  function(zeroBasedSlideIndex, slideElement) 
    pagerEvent:   'hover',// name of event which drives the pager navigation 
    pagerAnchorBuilder: function(i, slide){// callback fn for building anchor links:  function(index, DOMelement) 
        return '<li class="thumb" id="thumb-1"><img src="' + slide.src + '" height="30" width="40" /></a></li>';
    },
    before: function(){ // deselect all slides
        $(".thumb").removeClass('selected');
    },
    after: function(foo, bar, opts){ // select current slide
        $("#thumb-"+opts.currSlide).addClass('selected');
    }, 
    fit:           1,     // force slides to fit container 
    pause:         1,     // true to enable "pause on hover" 
    pauseOnPagerHover: 1, // stop slideshow when pagers are being hovered
    autostop:      0,     // true to end slideshow after X transitions (where X == slide count) 
    autostopCount: 0,     // number of transitions (optionally used with autostop to define X)  
    slideExpr:     "div", // all content of div#slider is a slide. but not the pager
    fastOnEvent:   100,   // force fast transitions when triggered manually (via pager or prev/next); value == time in ms 
});

似乎它会在pagerAnchorBuilder中但不确定。

Answer 1

看起来你错过了开始的锚标记

pagerAnchorBuilder: function(i, slide){// callback fn for building anchor links:  function(index, DOMelement) 
    return '<li class="thumb" id="thumb-1"><img src="' + slide.src + '" height="30" width="40" /></a></li>';
},

应该在<li>和<img>之间。看来你已经在那里结束了。正确的方法应该是这样的：

pagerAnchorBuilder: function(i, slide){// callback fn for building anchor links:  function(index, DOMelement) 
    return '<li class="thumb" id="thumb-1"><a href="path-to-link"><img src="' + slide.src + '" height="30" width="40" /></a></li>';
},

如果您想根据幻灯片的ID更改链接，可能需要以下内容：

pagerAnchorBuilder: function(i, slide){// callback fn for building anchor links:  function(index, DOMelement) 
    switch(slide.attr("id")){
        case "one": return '<li class="thumb" id="thumb-1"><a href="path-to-first-link"><img src="' + slide.src + '" height="30" width="40" /></a></li>';
        case "two": return '<li class="thumb" id="thumb-1"><a href="path-to-second-link"><img src="' + slide.src + '" height="30" width="40" /></a></li>';
        case "three": return '<li class="thumb" id="thumb-1"><a href="path-to-third-link"><img src="' + slide.src + '" height="30" width="40" /></a></li>';
    }


},

Jquery循环插件问题

1 个答案: