0

非常直接的问题：

我用（动态数量的幻灯片）构建了一个滑块，带有一个用于扩展导航的侧边栏（#slidercontrols）。此导航侧边栏的每个子项都应链接到他们自己的相应幻灯片。

我目前正在使用一个非常快速、简单的设置，它只是为每张幻灯片重复相同的代码并且工作得很好，但我相信我们都会同意这是一个非常混乱的解决方案。不是很干。出于教育原因，我很好奇你的专业人士将如何解决这个问题:)

你怎么能建立一个简单的循环来引导#slidernavigation child X 滑动 X？你需要某种我不熟悉的动态选择器......

小提琴：http: //jsfiddle.net/qbahamutp/TsJCP/

4

2 回答 2

1

好吧，起初我建议您只使用一个选择器。那么如何识别索引呢？有很多方法，但在这种情况下，一种方法是使用 jQuery http://api.jquery.com/jQuery.data/将数据存储到 div 元素

然后，当您单击任何 div 时，您只需从保存的数据中获取索引并使用它。

如果您知道 div 始终按索引顺序排列，您也可以使用 .index() 。.index() 示例http://jsfiddle.net/TsJCP/1/

于 2011-07-29T10:28:47.423 回答
1

我会这样做：

http://jsfiddle.net/9Quk7/5/

将属性 rel 添加到带有幻灯片编号的滑块控件$.each()或使用其他一些逻辑来执行此操作（例如在 html 中生成索引，例如从数据库中获取它们）。您也可以将它用作 jQuery 和 CSS 中的选择器。例如.article[rel="1"]{ color: red !important; }

生成的标记看起来像

<div class="article gotoslide-1 currentslide" rel="1">
                <h4>Past NedTrain bij jou?</h4>
                <p>Bekijk met welke functies en .</p>
</div>

并$(this).attr('rel')在 onclick 中使用以获取索引。

$(function(){
    $('#contentslider ul').anythingSlider({
        width            : 320,
        height            : 215,
        startStopped    : true,
        forwardText        :"&nbsp;",
        backText        :"&nbsp;",
        delay            : 6000,
        easing            : 'easeInOutExpo',
//                    buildArrows        : false,
        hasgTags        : false,
//                    appendControlsTo: "#slidercontrols",
        buildNavigation    : false
    });

    $("#slidercontrols .article").each(function(i){
        $(this).attr('rel',i+1);
    });
    // Slide navigation. 
    $("#slidercontrols .article").click(function(){
        $('#contentslider ul').anythingSlider($(this).attr('rel'), function(slider){ /* alert('Now on page ' + slider.currentPage); */ });
        $(".currentslide").removeClass("currentslide");
        $(this).addClass("currentslide");
        return false;
    });
});

$("#slidercontrols .article").live('click',...);如果您计划动态添加幻灯片，您可能需要使用

于 2011-07-29T10:49:22.343 回答