幻灯片

• 
• 
• 
• 

 

 

<style type="text/css">
#SlidePlay *{font-family:"微软雅黑";}
#SlidePlay ul{ border:5px solid #DCDCDC; margin:0px;}
#SlidePlay ul,#SlidePlay ol{ padding:0px;}
#SlidePlay ul li,#SlidePlay ol li{list-style:none; }
#SlidePlay ul li{position:absolute; display:none } 
#SlidePlay ol a{ color:#fff;font-size:16px;}

/*序列或用户指定说明链接的样式*/
.slide-index{z-index:9999;position:absolute;bottom:0px; right:2px; letter-spacing:5px;} 
.slide-index a{text-decoration:none;color:#fff;outline:none} a:hover{text-decoration:underline;}
/*当前与展现图片关联的序列或用户指定说明链接的样式*/
.slide-best{font-weight:bold; color:#ad0000;font-size:18px;text-decoration:underline;}
/*说明文字样式*/
.slide-title{padding-left:5px;z-index:9999;position:absolute;bottom:-25px;left:0px;overflow:hidden; height:25px;opacity:0.4;filter:alpha(opacity=35);background:#000;color:#fff}
</style>

 

 

<script language="javascript" type="text/javascript">

    $(document).ready(function(){
        $("#SlidePlay").qSlidePlay(3000);
    });

;(function($){
    $.fn.extend({
        qSlidePlay:function(time){
             if($(this).length>1){
                 $(this).each(function(){ new SlidePlay(this,time); });
             }else{
                new SlidePlay(this,time);
             }
        } 
    });
    
    function SlidePlay(o,time){  
        if(typeof $(o).attr('rel')!=='undefined')return false;
        $(o).attr('rel',Math.random());
        var self=this;
        this.Ul=$(o).children('ul');
        this.LI=this.Ul.children('li');
        this.C={L:this.LI.length,H:parseInt(this.Ul.height())/2,W:parseInt(this.Ul.width())/2}; 
        this.Ol=$(o).find('ol li'); 
        if(this.Ol.length==0){ //没有指明关联链接或缩略图则创建展现序号
            this.Ul.append("<ol class='slide-index'>"); 
            this.LI.each(function(i){self.Ul.children('ol').append('<a>'+(i+1)+'</a>');});
            this.Ol=this.Ul.find('ol a'); 
        }
        this.Title=function(i){return this.LI.eq(i).find('img').attr('title');}
        //首次显示文字说明 如果存在的话
        this.SP=this.Ul.append("<span class='slide-title' style='width:"+(this.C.W*2-17*this.C.L)+"px'>"+ (this.Title(0)||'')+'</span>').find('span').css('bottom',this.Title(0)?'0':'-25px');
        
        this.Siv; this.I=1; this.Z=1; this.X;
        
        this.LI.hover(function(){self.Stop();},function(){self.Start();});//鼠标移入图片播放停止
        this.Ol.each(function(i){ $(this).hover(function(){self.Stop();self.Sel(i);},function(){ self.Start();});}); //鼠标移入文字链接播放停止
        this.Ol.eq(0).addClass('slide-best');  
    
        this.Sel=function(i){
                var isX=i<this.I-1;     //是否为用户鼠标随即移入对象
                if(i!=null)this.I=i;
                if(this.I==0)this.I=this.C.L;
                if(this.I>this.C.L)this.I=1;
                var sf = this.LI, 
                    x =(this.I==this.C.L?0:this.I), 
                    m = parseInt(Math.random()*150)%2==0,  //当播放到尾部时从新开始
                    d = m?{'top':0 ,opacity:'toggle'}:{'left':0,opacity:'toggle'}, 
                    t=600; 
                
                this.Ol.removeClass('slide-best').eq(x).addClass('slide-best');
                
                this.SP.html('').animate({bottom:'-25px'},t/2,function(){ //图片说明文字
                    var tl=self.Title(isX?i:x);
                    if(tl)self.SP.html(tl).animate({bottom:0},t);
                });
                
                sf.eq(x).css({'z-index':self.Z-1}).css(d).show();
                
                sf.eq(isX?this.X:this.I-1).css('z-index',self.Z) //隐藏当前
                                    .animate(m?{top:'-'+self.C.H,opacity:'toggle'}:{left:'-'+self.C.W,opacity:'toggle'},t,function(){
                                        $(this).css('z-index',self.Z-1).animate(d,t,function(){ $(this).hide();});
                                    });
                                    
                sf.eq(isX?i:x).css('z-index',self.Z-1) //显示下一张
                            .animate(m?{top:self.C.H,opacity:'toggle'}:{left:self.C.W,opacity:'toggle'},t,function(){
                                $(this).css('z-index',self.Z+1).animate(d,t);    
                            });        
                            
                this.X=x; this.Z++; this.I++;
        }
        this.Stop=function(){ window.clearInterval(this.Siv); }                            //停止        
        this.Start=function(){ this.Siv=setInterval(function(){ self.Sel();},time); }    //开始 
        this.Start(); 
    }
})(jQuery);
</script>

 

 

 

<div id="SlidePlay"  style="width:330px;">
<ul style="position:relative;overflow:hidden;height:504px; width:837px;">
<li style="display:inline"><img src="http://images.cnblogs.com/cnblogs_com/cn795/63595401e596c92d1c9583e8.jpg" style="height:504px; width:837px;" title="1.测测测测测测测测测测测测测测" /></li>
<li><img src="http://images.cnblogs.com/cnblogs_com/cn795/12661a9a8a9735acc8eaf47d.jpg" style="height:504px; width:837px;" title="2.测测测测测测测测测测测测测测测测测测测测测测测测测测测测"/></li>
<li><img src="http://images.cnblogs.com/cnblogs_com/cn795/89caf93940dabece3b87ce56.jpg" style="height:504px; width:837px;" title="3.测测测测测测测测测测测测测测" /></li>
<li><img src="http://images.cnblogs.com/cnblogs_com/cn795/772b2e8bacca6904c9fc7a48.jpg" style="height:504px; width:837px;" title="4.测测测测测测测测测测测测测测测测测测测测测测测测测测测测" /></li>
</ul>  
<!-- 可去掉此注释
<ol>
<li><a href="#">1.测测测</a> </li>
<li><a href="#">2.测测测</a></li>
<li><a href="#">3.测测测a> </li>
<li><a href="#">4.测测测</a> </li>
</ol>-->
</div>

 

 原创

转载请保留出处 cn795.cnblogs.com