jQuery - pageAnchorBuilder 图像推子答案

【问题标题】：jQuery - pageAnchorBuilder image faderjQuery - pageAnchorBuilder 图像推子
【发布时间】：2012-11-13 22:20:50
【问题描述】：

我最近发现了 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）时，列表项会发生变化。

【问题讨论】：

标签： jquery image cycle transition

【解决方案1】：

我找到了答案。尽管它确实感觉有点像 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");
}

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

【讨论】：