Question

我正在使用Easy Slider 1.5插件，我正在尝试（虽然我不知道我做了什么）..将第一张幻灯片的暂停时间从4000更改为8000.

我不知道我应该怎么做代码。但根据我的逻辑，我认为我应该尝试获取li：first-child然后设置暂停：8000

寻求同样的帮助！

更新 -

到目前为止，我有这个 -

    $(document).ready(function(){   
        $("#slider").easySlider({
            auto: true,
            continuous: true    
        });
        $("#firstSlider").easySlider({
            pause: 15000    
        });
    }); 

<div id="slider">
        <ul>                
            <li id="firstSlider"><a href="http://templatica.com/preview/30"><img src="../../images/flash-image.jpg" alt="Css Template Preview" /></a></li>
            <li><a href="http://templatica.com/preview/7"><img src="../../images/flash-image2.jpg" alt="Css Template Preview" /></a></li>
            <li><a href="http://templatica.com/preview/25"><img src="images/03.jpg" alt="Css Template Preview" /></a></li>
            <li><a href="http://templatica.com/preview/26"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
            <li><a href="http://templatica.com/preview/27"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>          
        </ul>
    </div>

Answer 1

似乎Easy Slider无法设置单独滑动的选项。

这是源代码，它没有提供修改单独幻灯片的方法。如果您想使用此插件来执行您想要的操作，则必须重写一些代码以修改源代码。

(function($) {

$.fn.easySlider = function(options){

    // default configuration properties
    var defaults = {            
        prevId:         'prevBtn',
        prevText:       'Previous',
        nextId:         'nextBtn',  
        nextText:       'Next',
        controlsShow:   true,
        controlsBefore: '',
        controlsAfter:  '', 
        controlsFade:   true,
        firstId:        'firstBtn',
        firstText:      'First',
        firstShow:      false,
        lastId:         'lastBtn',  
        lastText:       'Last',
        lastShow:       false,              
        vertical:       false,
        speed:          800,
        auto:           false,
        pause:          4000,
        continuous:     false,
        hoverpause:     false
    }; 

    var options = $.extend(defaults, options);  

    this.each(function() {  
        var obj = $(this);              
        var s = $("li", obj).length;
        var w = $("li", obj).width(); 
        var h = $("li", obj).height(); 
        obj.width(w); 
        obj.height(h); 
        obj.css("overflow","hidden");
        var ts = s-1;
        var t = 0;
        $("ul", obj).css('width',s*w);          
        if(!options.vertical) $("li", obj).css('float','left');

        if(options.controlsShow){
            var html = options.controlsBefore;
            if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
            html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';
            html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';
            if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';
            html += options.controlsAfter;                      
            $(obj).after(html);                                     
        };

        $("a","#"+options.nextId).click(function(){     
            animate("next",true);
        });
        $("a","#"+options.prevId).click(function(){     
            animate("prev",true);               
        }); 
        $("a","#"+options.firstId).click(function(){        
            animate("first",true);
        });             
        $("a","#"+options.lastId).click(function(){     
            animate("last",true);               
        });     

        function animate(dir,clicked){
            var ot = t;             
            switch(dir){
                case "next":
                    t = (ot>=ts) ? (options.continuous ? 0 : ts) : t+1;                     
                    break; 
                case "prev":
                    t = (t<=0) ? (options.continuous ? ts : 0) : t-1;
                    break; 
                case "first":
                    t = 0;
                    break; 
                case "last":
                    t = ts;
                    break; 
                default:
                    break; 
            };  

            var diff = Math.abs(ot-t);
            var speed = diff*options.speed;                     
            if(!options.vertical) {
                p = (t*w*-1);
                $("ul",obj).animate(
                    { marginLeft: p }, 
                    speed
                );              
            } else {
                p = (t*h*-1);
                $("ul",obj).animate(
                    { marginTop: p }, 
                    speed
                );                  
            };

            if(!options.continuous && options.controlsFade){                    
                if(t==ts){
                    $("a","#"+options.nextId).hide();
                    $("a","#"+options.lastId).hide();
                } else {
                    $("a","#"+options.nextId).show();
                    $("a","#"+options.lastId).show();                   
                };
                if(t==0){
                    $("a","#"+options.prevId).hide();
                    $("a","#"+options.firstId).hide();
                } else {
                    $("a","#"+options.prevId).show();
                    $("a","#"+options.firstId).show();
                };                  
            };              

            //if(clicked || (options.auto && options.pauseOnHover ) clearTimeout(timeout);
            if(options.auto && dir=="next" && !clicked){;
                timeout = setTimeout(function(){
                    animate("next",false);
                },diff*options.speed+options.pause);
            };

        };
        // init
        var timeout;
        if(options.auto){;
            timeout = setTimeout(function(){
                animate("next",false);
            },options.pause);
        };      
        if(options.hoverpause && options.auto){
            $(this).mouseover(function(){
                clearTimeout(timeout);                  
            }).mouseout(function(){
                animate("next",false);                  
            })
        }
        if(!options.continuous && options.controlsFade){                    
            $("a","#"+options.prevId).hide();
            $("a","#"+options.firstId).hide();              
        };              

    });

};

})(jQuery);

Answer 2

我解决了这个问题。二手EasySlider 1.7。并修改了一些代码以获得所需的结果。

以下是我的表现 - （我的博文） http://thecuriousengineer.org/how-to-change-the-pause-time-of-first-slide-in-easyslider/

更改Easy Slider中第一张幻灯片的暂停时间

2 个答案:

似乎Easy Slider无法设置单独滑动的选项。