Question

我目前正在“尝试”实施localscroll＆amp;循环功能一起创建一个滑块。滑块应该有两个按钮（左和右），具有自动旋转周期。 localscroll和click函数应该在底部有小按钮，用户可以在旋转滑块内导航到某个图像。

循环功能有效。但localscroll功能不起作用。 Please view the JSFiddle

jQuery的：

    $(document).ready(function() {
        $("#slideshow").css("overflow", "hidden");
        $("#slideshow-nav").css("visibility", "visible");
    $("#slideshow-nav a[href=#lambo1]").addClass("active");

    $("#slideshow-nav").localScroll({
            target:'#slideshow', axis: 'x'
    });

$("#slideshow-nav a").click(function(){
            $("#slideshow-nav a").removeClass("active");
            $(this).addClass("active");
    });

    $("ul#slides").cycle({
            fx: 'fade',
            pause: 1,
            prev: '#prev',
            next: '#next'
    });

    $("#slideshow").hover(function() {
    $("ul#nav").fadeIn();
    },
            function() {
    $("ul#nav").fadeOut();
    });

}）;

Answer 1

您可以尝试Nivo Slider。开箱即用它具有您正在寻找的功能，以及许多选项，如果您需要自定义。

<script type="text/javascript">
jQuery(window).load(function(){
jQuery("#nivoslider-4").nivoSlider({
    effect:"random",
    slices:15,
    boxCols:8,
    boxRows:4,
    animSpeed:500,
    pauseTime:3000,
    startSlide:0,
    directionNav:true,
    controlNav:true,
    controlNavThumbs:false,
    pauseOnHover:true,
    manualAdvance:false
});
});
</script>

jQuery Slider localScroll＆amp;循环功能 - 不工作

1 个答案: