很奇怪,被收藏的代码总是这个。还有人发消息探讨。 事实上最初那个来自w3c的代码我已经不怎么用。 我觉得这个更好。 演示效果地址:coding http://5sk8yx.coding-pages.com/ 代码全文如下: |
<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,//上次显示项 | |
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<=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; | |
//利用透明度来实现切换图片 | |
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); | |
},9000) | |
}, | |
//处理鼠标事件 | |
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> |
联系客服