Question

我写了自己的滑块，很简单。

<script type="text/javascript">
    $(document).ready(function() {      
        $('#sliders .slidermain:first').removeClass('hide');
        slider();
    });

    function slider() {
        $('#sliders .slidermain').css({ opacity: 0.0 });
        $('#sliders .slidermain:first').css({ opacity: 1.0 });
        setInterval('show()',7000);
    }

    function show() {
        var current;
        if(#sliders .slidermain.show) {
            current = $('#sliders .slidermain.show');
        }
        else {
            current = $('#sliders .slidermain:first'));
        }

        var next;
        if (current.next().length) {
            next = current.next('#sliders .slidermain');
        }
        else {
            next = $('#sliders .slidermain:first');
        }

        next.css({opacity: 0.0})
            .removeClass('hide')
            .addClass('show')
            .animate({opacity: 1.0}, 1000);

        current.animate({opacity: 0.0}, 1000)
            .removeClass('show')
            .addClass('hide');
    }
</script>

现在我要添加到此滑块nagiator。例如：如果我点击li rel=1，我希望div出现rel=1。我已写过：

var clicked;
$("#sliders #navi li").click(function()  {
    clicked = $(this).attr('rel')
},
function() {
    next = $("#sliders .slidermain [rel=clicked]");
});

但它不起作用。你能给我一些建议吗？

这是一个带有代码的jsFiddle：http://jsfiddle.net/3wAHQ/2/

Answer 1

我认为你在寻找的是一个简单的jQuery插件：
http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/

我相信你用“导航器”做的所有事情这里的演示是one example

如何将导航器添加到jquery滑块

1 个答案: