| <head> |
| <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> |
| <title></title> |
| <style> |
| <!-- |
| body, ul, li, p { |
| margin: 0; |
| padding: 0; |
| } |
| ul{ |
| list-style-type:none; |
| } |
| body { |
| font-family:"Times New Roman", Times, serif; |
| } |
| #box { |
| position:relative; |
| width:230px; |
| height:600px; |
| margin:0px auto; |
| } |
| #box .imgList{ |
| position:relative; |
| width:230px; |
| height:600px; |
| overflow:hidden; |
| } |
| #box .imgList li{ |
| position:absolute; |
| top:0; |
| left:0; |
| width:230px; |
| height:600px; |
| } |
| #box .countNum{ |
| position:absolute; |
| right:0; |
| bottom:8px; |
| } |
| #box .countNum li{ |
| width:20.5px; |
| height:20px; |
| float:left; |
| color:#fff; |
| border-radius:20px; |
| background:#f90; |
| text-align:center; |
| margin-right:5px; |
| cursor:pointer; |
| opacity:0.7; |
| filter:alpha(opacity=70); |
| } |
| #box .countNum li.current{ |
| background:#f60; |
| font-weight:bold; |
| opacity:1; |
| filter:alpha(opacity=70); |
| } |
| --> |
| </style> |
| <script> |
| <!-- |
| function runImg(){} |
| runImg.prototype={ |
| bigbox:null,//最外層容器 |
| boxul:null,//子容器ul |
| imglist:null,//子容器img |
| numlist:null,//子容器countNum |
| prov:0,//上次顯示項(xiàng) |
| index:0,//當(dāng)前顯示項(xiàng) |
| timer:null,//控制圖片轉(zhuǎn)變效果 |
| play:null,//控制自動(dòng)播放 |
| imgurl:[],//存放圖片 |
| count:0,//存放的個(gè)數(shù) |
| $:function(obj) |
| { |
| if(typeof(obj)=="string") |
| { |
| if(obj.indexOf("#")>=0) |
| { |
| obj=obj.replace("#",""); |
| if(document.getElementById(obj)) |
| { |
| return document.getElementById(obj); |
| } |
| else |
| { |
| alert("沒(méi)有容器"+obj); |
| return null; |
| } |
| } |
| else |
| { |
| return document.createElement(obj); |
| } |
| } |
| else |
| { |
| return obj; |
| } |
| }, |
| //初始化 |
| info:function(id) |
| { |
| this.count=this.count<=9?this.count:9; |
| this.bigbox=this.$(id); |
| for(var i=0;i<2;i++) |
| { |
| var ul=this.$("ul"); |
| for(var j=1;j<=this.count;j++) |
| { |
| var li=this.$("li"); |
| li.innerHTML=i==0?this.imgurl[j-1]:j; |
| ul.appendChild(li); |
| } |
| this.bigbox.appendChild(ul); |
| } |
| this.boxul=this.bigbox.getElementsByTagName("ul"); |
| this.boxul[0].className="imgList"; |
| this.boxul[1].className="countNum"; |
| this.imglist=this.boxul[0].getElementsByTagName("li"); |
| this.numlist=this.boxul[1].getElementsByTagName("li"); |
| for(var j=0;j<this.imglist.length;j++) |
| { |
| this.alpha(j,0); |
| } |
| this.alpha(0,100); |
| this.numlist[0].className="current"; |
| }, |
| //封裝程序入口 |
| action:function(id) |
| { |
| this.autoplay(); |
| this.mouseoverout(this.bigbox,this.numlist); |
| }, |
| //圖片切換效果 |
| imgshow:function(num,numlist,imglist) |
| { |
| this.index=num; |
| var pralpha=100; |
| var inalpha=0; |
| for(var i=0;i<numlist.length;i++) |
| { |
| numlist[i].className=""; |
| } |
| numlist[this.index].className="current"; |
| clearInterval(this.timer); |
| for(var j=0;j<this.imglist.length;j++) |
| { |
| this.alpha(j,0); |
| } |
| this.alpha(this.prov,100); |
| this.alpha(this.index,0); |
| var $this=this; |
| //利用透明度來(lái)實(shí)現(xiàn)切換圖片 |
| this.timer=setInterval(function(){ |
| inalpha+=2; |
| pralpha-=2; |
| if(inalpha>100){inalpha=100};//不能大于100 |
| if(pralpha<0){pralpha=100}; |
| //為兼容性賦樣式 |
| $this.alpha($this.prov,pralpha); |
| $this.alpha($this.index,inalpha); |
| if(inalpha==100&&pralpha==0){clearInterval($this.timer)};//當(dāng)?shù)扔?00的時(shí)候就切換完成了 |
| },20)//經(jīng)測(cè)試20是我認(rèn)為最合適的值 |
| }, |
| //設(shè)置透明度 |
| alpha:function(i,opacity){ |
| this.imglist[i].style.opacity=opacity/100; |
| this.imglist[i].style.filter="alpha(opacity="+opacity+")"; |
| }, |
| //自動(dòng)播放 |
| autoplay:function(){ |
| var $this=this; |
| this.play=setInterval(function(){ |
| $this.prov=$this.index; |
| $this.index++; |
| if($this.index>$this.imglist.length-1){$this.index=0}; |
| $this.imgshow($this.index,$this.numlist,$this.imglist); |
| },9000) |
| }, |
| //處理鼠標(biāo)事件 |
| mouseoverout:function(box,numlist) |
| { |
| var $this=this; |
| box.onmouseover=function() |
| { |
| clearInterval($this.play); |
| } |
| box.onmouseout=function() |
| { |
| $this.autoplay($this.index); |
| } |
| for(var i=0;i<numlist.length;i++) |
| { |
| numlist[i].index=i; |
| numlist[i].onmouseover=function(){ |
| $this.prov=$this.index; |
| $this.imgshow(this.index,$this.numlist,$this.imglist); |
| } |
| } |
| } |
| } |
| window.onload=function(){ |
| var runimg=new runImg(); |
| runimg.count=9; |
| runimg.imgurl=[ |
| "<img src=\"1.jpg\"/>", |
| "<img src=\"2.jpg\"/>", |
|
|
|
|
| "<img src=\"3.jpg\"/>", |
|
|
|
|
|
|
|
|
| "<img src=\"4.jpg\"/>", |
|
|
| "<img src=\"5.jpg\"/>", |
|
|
| "<img src=\"6.jpg\"/>", |
|
|
| "<img src=\"7.jpg\"/>", |
|
|
|
|
|
|
|
|
| "<img src=\"8.jpg\"/>", |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| "<img src=\"9.jpg\"/>"]; |
|
|
|
|
|
|
|
|
| runimg.info("#box"); |
| runimg.action("#box"); |
| } |
| --> |
| </script> |
| </head> |
|
|
| <body> |
| <div id="box"></div> |
| </body> |
| </html> |
