jquery.slide.js/幻灯片/图片切换
2012-10-30 金城 16854
(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()});
});