上海益国网络科技有限公司
上海专业网站建设一条龙服务

学无止境!

这里摘有最贴近网站程序使用的方方面面相关技术文档~

021-20906540
AM 9:30-12:00 PM:2:00-5:30
您当前位置:首页 >> 技术支持 >>  技术专辑 >>  JS-JQ幻灯

JS实现/图片加标题/淡入淡出/幻灯效果

CSS:

<style type="text/css">

.siqiji_panel{width:667px;position:relative;overflow:hidden;}

.siqiji_panel img{border:none;width:669px;height:414px;}

.siqiji_wrap{height:414px;overflow:hidden;}

.siqiji_nav{position:absolute;bottom:0px;width:110%;height:28px;}

.siqiji_nav a{display:block;float:left;display:inline;width:132px;height:100%;line-height :28px;text-decoration:none;margin-right:2px;font:14px/2.2 arial;position:relative;}

.siqiji_nav a .siqiji_link_bg{display:block;height:100%;background:#666;filter:Alpha(opacity=70);opacity:0.7;zoom:1;}

.siqiji_nav a .siqiji_link_txt{position:absolute;top:0;left:0;display:block;width:100%;text-align:center;cursor:pointer;color:#fff;}

.siqiji_nav a:hover .siqiji_link_bg,.siqiji_nav a.hot .siqiji_link_bg{background:#fff;}

.siqiji_nav a:hover .siqiji_link_txt,.siqiji_nav a.hot .siqiji_link_txt{color:#000}

</style>




HTML:

<div class="siqiji_panel">

   <div class="siqiji_wrap" id="ad_slide">

       <a href="" ><img src="http://www.siqiji.net/codes/imgs/test/1.jpg" alt="" /></a>

       <a href="" ><img src="http://www.siqiji.net/codes/imgs/test/2.jpg" alt="" /></a>

       <a href="" ><img src="http://www.siqiji.net/codes/imgs/test/3.jpg" alt="" /></a>

       <a href="" ><img src="http://www.siqiji.net/codes/imgs/test/4.jpg" alt="" /></a>

       <a href="" ><img src="http://www.siqiji.net/codes/imgs/test/5.jpg" alt="" /></a>

   </div>

   <div class="siqiji_nav" id="siqiji_nav">

       <a href="" ><span class="siqiji_link_bg"></span><span class="siqiji_link_txt">永远的迷:巨石阵</span></a>

       <a href="" ><span class="siqiji_link_bg"></span><span class="siqiji_link_txt">英国乡村</span></a>

       <a href="" ><span class="siqiji_link_bg"></span><span class="siqiji_link_txt">黑龙江</span></a>

       <a href="" ><span class="siqiji_link_bg"></span><span class="siqiji_link_txt">绿水绿草</span></a>

       <a href="" ><span class="siqiji_link_bg"></span><span class="siqiji_link_txt">神奇九寨</span></a>

   </div>

</div>




JS:

<script type="text/javascript">

function PicSlide(panel,opt){

   this.panel=typeof panel=="string"?document.getElementById(panel):panel;

   for(var k in opt)this[k]=opt[k]

   this.init()

};

PicSlide.prototype={

   current:0,

   timer:null,

   time:500,

   type:'scroll',

   act:'scroll',

   interval:4000,

   init:function (){

       var _this=this,world=this.panel.parentNode;

       this.imgs=this.panel.getElementsByTagName('A');

       for(var i=0,l=this.imgs.length;i<l;i++)

           this.imgs[i].style.cssText='position:absolute;display:'+(i==0?'':'none');

       this.createTab();

       this.interval=Math.max(this.interval,this.time);

       world.onmouseover=function (){_this.hover=true};

       world.onmouseout=function (){_this.hover=false};

       this.auto()

   },

   createTab:function (){

       var len=this.imgs.length,btn,_this=this;

       this.nav=document.getElementById('siqiji_nav');

       this.btns=this.nav.getElementsByTagName('A');

       for(var i=0;i<len;i++){

           btn=this.btns[i];

           if(i==0)btn.className='hot';

           btn.radioIndex=i;

           btn.onmouseover=function (){_this.focus(this.radioIndex)}

       }

   },

   focus:function (next){

       next=next%this.imgs.length;

       if(next==this.current)return;

       this.btns[this.current].className='';

       this.btns[next].className='hot';

       this.fade(next);

   },

   fade:function (next){

       var _this=this;

       clearInterval(this.timer);

       this.timer=this.fx(1,0,function (x){

          _this.opacity( _this.imgs[_this.current],x)

       },function (){

           _this.imgs[_this.current].style.display='none';

           _this.opacity(_this.imgs[next],0);

           _this.imgs[next].style.display='';

           _this.current=next;

           _this.timer=_this.fx(0,1,function (x){

               _this.opacity( _this.imgs[next],x)

           },0,200,.5)

       })

   },

   fx:function (f,t,fn,ed,tm,r){

       var D=Date,d=new D,e,ed=ed||D,c=tm||300,r=r||5;

       return e=setInterval(function (){

           var z=Math.min(1,(new D-d)/c);

           var stop=fn(+f+(t-f)*Math.pow(z,r),z);

           if(z==1||false===stop)ed(clearTimeout(e))

       },10)

   },

   opacity:function (el,n){

      el.style.filter='progid:DXImageTransform.Microsoft.Alpha(opacity='+n*100+');';

      if(n==1)el.style.filter=null;

      el.style.opacity=n;        

   },

   auto:function (){

       var _this=this;

       setInterval(function (){if(!_this.hover)_this.focus(_this.current+1)},this.interval);

   }

};

var ldh_tb=new PicSlide('ad_slide',{type:'opacity'});

</script>


做网站找动人网络!建站一条龙服务找动人网络!站长学习尽在站长培训网
  • FlexSlider2 幻灯参数详解
    TOP