jquery.slide.js/幻灯片/图片切换
软源LOGO
讲述咱程序员自己的故事

位置:软源 »编程 »文章

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

coolapp;2012-10-30 18:43:46;浏览:16345
/*
css设置
.slide{margin:0;padding: 0;list-style-type:none;position:absolute;top:260px;right:80px;}
.slide li{padding:3px 3px 0 3px;overflow:hidden;margin:0 8px 0 0;float:left;display:block;font-size:7px;cursor:pointer;border-radius:3px;border:1px dashed #ccc;}
.slide li img{width:36px;border:none;}
.slide li.sel{border:1px dashed #fff;}
.sdemo{position:relative;}
.sdemo img{position:absolute;top:0;left:0;}

html设置
平滑渐变切换图片
<div style="width:400px;height:300px;">
  <ul class="slide">
    <li><img src="1.png" alt="" /></li>
    <li><img src="2.png" alt="" /></li>
    <li><a href="#"><img src="3.png" alt="" /></a></li>
  </ul>
</div>
*/

/*coolapp@163.com,mycoolapp.net*/(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()});
});
分享到:
(转载→)