2

我需要向 Looped Slider 添加播放、暂停和停止按钮。这是旧的和定制的版本。这是同一个滑块的最新版本http://www.slidesjs.com/我只需要一些指导线和一个起点。

Bloew 是我正在使用的插件的代码。提前致谢

if(typeof jQuery != 'undefined') {
    jQuery(function($) {
        $.fn.extend({
            loopedSlider: function(options) {
                var settings = $.extend({}, $.fn.loopedSlider.defaults, options);

                return this.each(
                    function() {
                    if($.fn.jquery < '1.3.2') {return;}
                    var $t = $(this);
                    var o = $.metadata ? $.extend({}, settings, $t.metadata()) : settings;

                    var distance = 0;
                    var times = 1;
                    var slides = $(o.slides,$t).children().size();
                    var width = $(o.slides,$t).children().outerWidth();
                    var position = 0;
                    var active = false;
                    var number = 0;
                    var interval = 0;
                    var restart = 0;
                    var pagination = $("."+o.pagination+" li a",$t);

                    if(o.addPagination && !$(pagination).length){
                        var buttons = slides;
                        $($t).append("<ul class="+o.pagination+">");
                        $(o.slides,$t).children().each(function(){
                            if (number<buttons) {
                                $("."+o.pagination,$t).append("<li><a rel="+(number+1)+" href=\"#\" >"+(number+1)+"</a></li>");
                                number = number+1;
                            } else {
                                number = 0;
                                return false;
                            }
                            $("."+o.pagination+" li a:eq(0)",$t).parent().addClass("active");
                        });
                        pagination = $("."+o.pagination+" li a",$t);
                    } else {
                        $(pagination,$t).each(function(){
                            number=number+1;
                            $(this).attr("rel",number);
                            $(pagination.eq(0),$t).parent().addClass("active");
                        });
                    }

                    if (slides===1) {
                        $(o.slides,$t).children().css({position:"absolute",left:position,display:"block"});
                        return;
                    }

                    $(o.slides,$t).css({width:(slides*width)});

                    $(o.slides,$t).children().each(function(){
                        $(this).css({position:"absolute",left:position,display:"block"});
                        position=position+width;
                    });

                    $(o.slides,$t).children(":eq("+(slides-1)+")").css({position:"absolute",left:-width});

                    if (slides>3) {
                        $(o.slides,$t).children(":eq("+(slides-1)+")").css({position:"absolute",left:-width});
                    }

                    if(o.autoHeight){autoHeight(times);}

                    $(".next",$t).click(function(){
                        if(active===false) {
                            animate("next",true);
                            if(o.autoStart){
                                if (o.restart) {autoStart();}
                                else {clearInterval(sliderIntervalID);}
                            }
                        } return false;
                    });

                    $(".previous",$t).click(function(){
                        if(active===false) {    
                            animate("prev",true);
                            if(o.autoStart){
                                if (o.restart) {autoStart();}
                                else {clearInterval(sliderIntervalID);}
                            }
                        } return false;
                    });

                    if (o.containerClick) {
                        $(o.container,$t).click(function(){
                            if(active===false) {
                                animate("next",true);
                                if(o.autoStart){
                                    if (o.restart) {autoStart();}
                                    else {clearInterval(sliderIntervalID);}
                                }
                            } return false;
                        });
                    }

                    $(pagination,$t).click(function(){
                        if ($(this).parent().hasClass("active")) {return false;}
                        else {
                            times = $(this).attr("rel");
                            $(pagination,$t).parent().siblings().removeClass("active");
                            $(this).parent().addClass("active");
                            animate("fade",times);
                            if(o.autoStart){
                                if (o.restart) {autoStart();}
                                else {clearInterval(sliderIntervalID);}
                            }
                        } return false;
                    });

                    if (o.autoStart) {
                        sliderIntervalID = setInterval(function(){
                            if(active===false) {animate("next",true);}
                        },o.autoStart);
                        function autoStart() {
                            if (o.restart) {
                            clearInterval(sliderIntervalID,interval);
                            clearTimeout(restart);
                                restart = setTimeout(function() {
                                    interval = setInterval( function(){
                                        animate("next",true);
                                    },o.autoStart);
                                },o.restart);
                            } else {
                                sliderIntervalID = setInterval(function(){
                                    if(active===false) {animate("next",true);}
                                },o.autoStart);
                            }
                        };
                    }

                    function current(times) {
                        if(times===slides+1){times = 1;}
                        if(times===0){times = slides;}
                        $(pagination,$t).parent().siblings().removeClass("active");
                        $(pagination+"[rel='" + (times) + "']",$t).parent().addClass("active");
                    };

                    function autoHeight(times) {
                        if(times===slides+1){times=1;}
                        if(times===0){times=slides;}    
                        var getHeight = $(o.slides,$t).children(":eq("+(times-1)+")",$t).outerHeight();
                        $(o.container,$t).animate({height: getHeight},o.autoHeight);                    
                    };      

                    function animate(dir,clicked){  
                        active = true;  
                        switch(dir){
                            case "next":
                                times = times+1;
                                distance = (-(times*width-width));
                                current(times);
                                if(o.autoHeight){autoHeight(times);}
                                if(slides<3){
                                    if (times===3){$(o.slides,$t).children(":eq(0)").css({left:(slides*width)});}
                                    if (times===2){$(o.slides,$t).children(":eq("+(slides-1)+")").css({position:"absolute",left:width});}
                                }
                                $(o.slides,$t).animate({left: distance}, o.slidespeed,function(){
                                    if (times===slides+1) {
                                        times = 1;
                                        $(o.slides,$t).css({left:0},function(){$(o.slides,$t).animate({left:distance})});                           
                                        $(o.slides,$t).children(":eq(0)").css({left:0});
                                        $(o.slides,$t).children(":eq("+(slides-1)+")").css({ position:"absolute",left:-width});             
                                    }
                                    if (times===slides) $(o.slides,$t).children(":eq(0)").css({left:(slides*width)});
                                    if (times===slides-1) $(o.slides,$t).children(":eq("+(slides-1)+")").css({left:(slides*width-width)});
                                    active = false;
                                });                 
                                break; 
                            case "prev":
                                times = times-1;
                                distance = (-(times*width-width));
                                current(times);
                                if(o.autoHeight){autoHeight(times);}
                                if (slides<3){
                                    if(times===0){$(o.slides,$t).children(":eq("+(slides-1)+")").css({position:"absolute",left:(-width)});}
                                    if(times===1){$(o.slides,$t).children(":eq(0)").css({position:"absolute",left:0});}
                                }
                                $(o.slides,$t).animate({left: distance}, o.slidespeed,function(){
                                    if (times===0) {
                                        times = slides;
                                        $(o.slides,$t).children(":eq("+(slides-1)+")").css({position:"absolute",left:(slides*width-width)});
                                        $(o.slides,$t).css({left: -(slides*width-width)});
                                        $(o.slides,$t).children(":eq(0)").css({left:(slides*width)});
                                    }
                                    if (times===2 ) $(o.slides,$t).children(":eq(0)").css({position:"absolute",left:0});
                                    if (times===1) $(o.slides,$t).children(":eq("+ (slides-1) +")").css({position:"absolute",left:-width});
                                    active = false;
                                });
                                break;
                            case "fade":
                                times = [times]*1;
                                distance = (-(times*width-width));
                                current(times);
                                if(o.autoHeight){autoHeight(times);}
                                $(o.slides,$t).children().fadeOut(o.fadespeed, function(){
                                    $(o.slides,$t).css({left: distance});
                                    $(o.slides,$t).children(":eq("+(slides-1)+")").css({left:slides*width-width});
                                    $(o.slides,$t).children(":eq(0)").css({left:0});
                                    if(times===slides){$(o.slides,$t).children(":eq(0)").css({left:(slides*width)});}
                                    if(times===1){$(o.slides,$t).children(":eq("+(slides-1)+")").css({ position:"absolute",left:-width});}
                                    $(o.slides,$t).children().fadeIn(o.fadespeed);
                                    active = false;
                                });
                                break; 
                            default:
                                break;
                            }                   
                        };
                    }
                );
            }
        });
        $.fn.loopedSlider.defaults = {
            container: ".container", //Class/id of main container. You can use "#container" for an id.
            slides: ".slides", //Class/id of slide container. You can use "#slides" for an id.
            pagination: "pagination", //Class name of parent ul for numbered links. Don't add a "." here.
            containerClick: true, //Click slider to goto next slide? true/false
            autoStart: 5000, //Set to positive number for true. This number will be the time between transitions.
            restart: 0, //Set to positive number for true. Sets time until autoStart is restarted.
            slidespeed: 300, //Speed of slide animation, 1000 = 1second.
            fadespeed: 200, //Speed of fade animation, 1000 = 1second.
            autoHeight: 0, //Set to positive number for true. This number will be the speed of the animation.
            addPagination: false //Add pagination links based on content? true/false
        };
    });
}
4

2 回答 2

1

我自己能够做到这一点。在要初始化 loopedslider 的地方添加这些选项。

pauseSlideShow : true,
startSlideShow : true

然后在插件代码中添加此代码段。

/*Custom play puase buttons*/
                    if(o.pauseSlideShow){
                        $(".pauseslideshow").click(function(){


                            clearInterval(sliderIntervalID);

                        });                     
                    }
                    if(o.startSlideShow){
                        $(".startlideshow").click(function(){
                            sliderIntervalID = setInterval(function(){
                                if(active===false) {animate("next",true);}
                            },o.autoStart);

                        });         

                    }/*#Custom play Pause buttons*/

播放和暂停按钮必须相应地具有“startSlideShow”和“pauseslideshow”类。

于 2012-11-22T15:47:37.987 回答
0

这是简单的代码，您可以制作播放暂停按钮：

var autoStart = true;
$('#your-slider-id').royalSlider({
    autoPlay: {
        enabled: autoStart
    }
});

按钮的html代码

<button id="toggleAutoPlayBtn">Pause</button>

在 document.ready() 中绑定按钮上的单击事件并调用 toggleAutoPlay 函数

jQuery(document).ready(function($) {  
 // optionally put here slider initialization code from first step

$('#toggleAutoPlayBtn').click(function() {
        // optionally change button text, style e.t.c.
        if(autoStart) {
            $(this).html('play');
        } else {
            $(this).html('pause');
        }
        autoStart = !autoStart;

        $('#your-slider-id').royalSlider('toggleAutoPlay');
 });
});
于 2014-02-13T06:59:44.967 回答