帅就一个字，超帅仿淘宝首页半透明图片切换特效
2013-10-10 05:49:09 -0400
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>taobao首页轮播原生js面对对象封装版</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:308px; height:172px; margin:10px auto; } #box .imgList{ position:relative; width:308px; height:170px; overflow:hidden; } #box .imgList li{ position:absolute; top:0; left:0; width:310px; height:170px; } #box .countNum{ position:absolute; right:0; bottom:5px; } #box .countNum li{ width:20px; 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,//上次显示项 index:0,//当前显示项 timer:null,//控制图片转变效果 play:null,//控制自动播放 imgurl:[],//存放图片 count:0,//存放的个数 $:function(obj) { if(typeof(obj)=="string") { if(obj.indexOf("#")>=0) { obj=obj.replace("#",""); if(document.getElementById(obj)) { return document.getElementById(obj); } else { alert("没有容器"+obj); return null; } } else { return document.createElement(obj); } } else { return obj; } }, //初始化 info:function(id) { this.count=this.count<=5?this.count:5; 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; //利用透明度来实现切换图片 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)};//当等于100的时候就切换完成了 },20)//经测试20是我认为最合适的值 }, //设置透明度 alpha:function(i,opacity){ this.imglist[i].style.opacity=opacity/100; this.imglist[i].style.filter="alpha(opacity="+opacity+")"; }, //自动播放 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); },2000) }, //处理鼠标事件 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=5; runimg.imgurl=[ "<img src=\"http://i.mmcdn.cn/simba/img/T117eTXmXqXXXXXXXX.jpg\"/>", "<img src=\"http://img03.taobaocdn.com/tps/i3/T1t8eTXbBtXXXXXXXX-490-170.png\"/>", "<img src=\"http://i.mmcdn.cn/simba/img/T1OVOUXeNjXXXXXXXX.jpg\"/>", "<img src=\"http://i.mmcdn.cn/simba/img/T1J.9TXc8lXXXXXXXX.jpg\"/>", "<img src=\"http://img03.taobaocdn.com/tps/i3/T1ITuTXbRnXXXXXXXX-490-170.png\"/>"]; runimg.info("#box"); runimg.action("#box"); } --> </script> </head> <body> <center><h1>Author:wyf</h1><p>2012/2/25</p></center> <div id="box"></div> </body> </html>
点击上面选择框全选代码
-以下为代码演示
taobao首页轮播原生js面对对象封装版
Author:wyf
2012/2/25
«Newer
Older»
Comment:
Name:
Back to home
Subscribe
|
Register
|
Login
|
N