jquery.slide.js/幻灯片/图片切换

2012-10-30  金城  16841



(function($){
 $.fn.slide=function(o){
  var opts = $.extend({},$.fn.slide.defaults,o);
  var fOutDelay=Math.round(opts.delay/2);
  $('.sdemo').remove();
  return this.each(function(){
   var me=$(this).css('z-index','2');
   clearInterval(me.attr('hdl'));
   var $sLi=me.find('li'); 
   var $sdemo=$('<div class="sdemo"></div>').css({'z-index':'1','width':opts.width+'px','height':opts.height+'px'});
   me.after($sdemo).parent().css('position','relative');
   var liCount=$sLi.length;
   var liIndex=0;
   $sdemo.html($sLi.eq(0).html());
   function play(){
    var $cLi=$sLi.eq(liIndex);
    $img=$($cLi.html().replace(/<img/i,'<img style="display:none;z-index:9"'));
    $sdemo.children().css('z-index','1').fadeOut(fOutDelay,function(){$(this).remove()});
    $sdemo.append($img);
    $img.fadeIn(fOutDelay);
    liIndex++;if(liIndex>=liCount)liIndex=0;
    $sLi.not($cLi[0]).removeClass('sel').fadeTo(50,.5);
    $cLi.addClass('sel').fadeTo(50,.2).fadeTo(50,1).fadeTo(50,.2).fadeTo(50,1).fadeTo(50,.2).fadeTo(50,1);
   };
   $sLi.each(function(i){
    $(this).click(function(){liIndex=i;clearInterval(me.attr('hdl'));play();me.attr('hdl',setInterval(play,opts.delay));});
   });
   clearInterval(me.attr('hdl'));
   me.attr('hdl',setInterval(play,opts.delay));
  });
 };
 $.fn.slide.defaults={
  width:400,height:300,delay:3000
 }
 $.fn.slide.setDefaults=function(settings){
  $.extend( $.fn.slide.defaults,settings);
 };
})(jQuery);
$(function(){
 $p=$('.slide').parent();
 $('.slide').slide({width:$p.width(),height:$p.height()});
});