Question

我正在使用此插件：http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider

我对jquery很新，我想知道是否有人能告诉我如何更改图像以淡入淡出而不是滑动。

(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:   true,
   pause:   2000,
   continuous:  true, 
   numeric:   true,
   numericId:   'controls'
  }; 

  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(); 
   var clickable = true;
   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.continuous){
    $("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
    $("ul", obj).append($("ul li:nth-child(2)", obj).clone());
    $("ul", obj).css('width',(s+1)*w);
   };    

   if(!options.vertical) $("li", obj).css('float','left');

   if(options.controlsShow){
    var html = options.controlsBefore;    
    if(options.numeric){
     html += '<ol id="'+ options.numericId +'"></ol>';
    } else {
     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);          
   };

   if(options.numeric){         
    for(var i=0;i<s;i++){      
     $(document.createElement("li"))
      .attr('id',options.numericId + (i+1))
      .html('<a rel='+ i +' href=\"javascript:void(0);\">'+ (i+1) +'</a>')
      .appendTo($("#"+ options.numericId))
      .click(function(){       
       animate($("a",$(this)).attr('rel'),true);
      });             
    };       
   } else {
    $("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 setCurrent(i){
    i = parseInt(i)+1;
    $("li", "#" + options.numericId).removeClass("current");
    $("li#" + options.numericId + i).addClass("current");
   };

   function adjust(){
    if(t>ts) t=0;  
    if(t<0) t=ts; 
    if(!options.vertical) {
     $("ul",obj).css("margin-left",(t*w*-1));
    } else {
     $("ul",obj).css("margin-left",(t*h*-1));
    }
    clickable = true;
    if(options.numeric) setCurrent(t);
   };

   function animate(dir,clicked){
    if (clickable){
     clickable = false;
     var ot = t;    
     switch(dir){
      case "next":
       t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;      
       break; 
      case "prev":
       t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
       break; 
      case "first":
       t = 0;
       break; 
      case "last":
       t = ts;
       break; 
      default:
       t = dir;
       break; 
     }; 
     var diff = Math.abs(ot-t);
     var speed = diff*options.speed;      
     if(!options.vertical) {
      p = (t*w*-1);
      $("ul",obj).animate(
       { marginLeft: p }, 
       { queue:false, duration:speed, complete:adjust }
      );    
     } else {
      p = (t*h*-1);
      $("ul",obj).animate(
       { marginTop: p }, 
       { queue:false, duration:speed, complete:adjust }
      );     
     };

     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) 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.numeric) setCurrent(0);

   if(!options.continuous && options.controlsFade){     
    $("a","#"+options.prevId).hide();
    $("a","#"+options.firstId).hide();    
   };    

  });

 };

})(jQuery);

Answer 1

找到这个

if(!options.vertical) {
                    p = (t*w*-1);
                    $("ul",obj).animate(
                        { marginLeft: p }, 
                        { queue:false, duration:speed, complete:adjust }
                    );              
                }

并将其更改为

if(!options.vertical) {
                    p = (t*w*-1);
                    $("ul",obj).animate(
                        { opacity: 0 }, 
                        { queue:false, duration:'slow', complete:adjust }
                    );  

                }

然后找到这个

if(!options.vertical) {
                $("ul",obj).css("margin-left",(t*w*-1));
            }

并将其更改为

if(!options.vertical) {
                $("ul",obj).css("margin-left",(t*w*-1));
                $("ul",obj).animate(
                        { opacity: 1 }, 
                        { queue:false, duration:'slow'}
                    );  
            }

我希望这会对你有所帮助。

Answer 2

这个特殊的插件不是为了褪色而构建的。

自定义Easy Slider 1.7淡化不滑动

2 个答案: