Question

我最近发现了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）。

Answer 1

我发现了答案。虽然它确实感觉有点像黑客，并且可能以更加语义的方式完成，但它确实达到了我想要的效果。无论如何，脚本改为：

$(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以实现该效果。

jQuery - pageAnchorBuilder图像推子

1 个答案: