1

我最近发现了 jQuery 循环选项，我想将它用于我正在开发的网站上的过渡滑块。我浏览了循环网站上的不同演示，找到了一个使用 pageAnchorBuilder 选项的演示。脚本的代码在这里：

$(document).ready(function () {
$('#slideshow') 
    .before('<ul id="navigation">') 
    .cycle({ 
        fx:     'fade', 
        timeout: 2000, 
        pager:  '#navigation',
        pagerAnchorBuilder: function(idx, slide) { 
                return '<li class="slide"><img src="' + slide.src + '" width="50" height="50" /></li>'; 
            }
    });
});

此代码旨在显示导航列表项的缩略图。但是，我不想将 slide.src 中的缩略图用于导航列表项图像。我想为列表项使用任意图像（例如button.png），当列表项被赋予'class = activeSlide'到另一个任意图像（例如button-hover.png）时，列表项会发生变化。

4

1 回答 1

0

我发现了一个答案。虽然它确实感觉有点像 hack 并且可能可以以更语义化的方式完成，但它确实达到了我正在寻找的效果。无论如何，脚本已更改为：

$(document).ready(function () {
    $('#slideshow') 
    .before('<ul id="navigation">') 
    .cycle({ 
        fx:     'fade', 
        timeout: 4000, 
        pager:  '#navigation',
        pagerAnchorBuilder: function(idx, slide) { 
                return '<li class="slide"></li>'; 
            }
    });
});

变化在于<li>标签之间输入的内容。开关来自：

return '<li class="slide"><img src="' + slide.src + '" width="50" height="50" /></li>';

到：

return '<li class="slide"></li>';

插入的图像将从标签中剥离。要实现效果，必须将 css 更改为：

li.slide  {
    display: inline-block;
    width: 10px;
    height: 10px
    background-image: url("button.png");
    background-repeat: no-repeat;
    background-position: center center;
}

li.slide.activeSlide {
    background-image: url("button-hover.png");
}

的 css<li>被主动更改以将 activeSlide 类包含到相应的<li>. 因此，通过在 css 中设置 li.slide.act 的样式，您可以覆盖 li.slide 的 css 以实现效果。

于 2012-11-14T10:15:18.753 回答