面向对象原生js幻灯片代淡出效果

2022-11-03 11:01:21

面向对象原生js幻灯片代淡出效果

下面是代码

<!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=gb2312" />
<title>无标题文档</title>
</head>
<body style="background:#CCC">
<script type="text/javascript">
var t=0;
var c;
function slidingClass(id){
slidingClass.id=document.getElementById(id);
slidingClass.timer="3000"
}
slidingClass.prototype={
//获取img的个数
imgL:function(tag){
return slidingClass.id.getElementsByTagName(tag).length;
},
hidden:function(){
var l=slidingClass.prototype.imgL("img");
for(i=0;i<l; i++){
if(i!=0){
slidingClass.id.getElementsByTagName("img")[i].style.display="none";
}else{
slidingClass.id.getElementsByTagName("img")[i].style.display="block";
}
}
},
hh:function(num){
slidingClass.id.getElementsByTagName("img")[num].style.display="none"
},
//淡入
fadeIn:function(num){
var v=0;
var t=setInterval(function(){
var id=slidingClass.id.getElementsByTagName("img")[num];
id.style.display="block";
id.style.position="absolute";
id.style.zIndex="9";
id.filters ? id.style.filter = 'alpha(opacity=' + (v+=10) + ')' : id.style.opacity = (v+=10)/100;
if(v>=100){
clearInterval(t);
}
},10)
},
show:function(num){
var l=slidingClass.prototype.imgL("li");
for(i=0;i<l; i++){
slidingClass.id.getElementsByTagName("li")[i].onclick=function(){
var t=this.innerHTML-1;
slidingClass.prototype.show(t);
slidingClass.prototype.fadeIn(t)
slidingClass.prototype.hh(t==0 ? slidingClass.prototype.imgL("img")-1:t-1)
slidingClass.prototype.show(t)
}
if(i!=num){
slidingClass.id.getElementsByTagName("li")[i].className="";
slidingClass.id.getElementsByTagName("img")[i].style.display="none";
}else{
slidingClass.id.getElementsByTagName("li")[i].className="hove";
}
}
},
//开始循环
loop:function(){
slidingClass.prototype.show(t);
slidingClass.prototype.fadeIn(t)
slidingClass.prototype.hh(t==0 ? slidingClass.prototype.imgL("img")-1:t-1)
c=setTimeout("slidingClass.prototype.loop()",slidingClass.timer);
//document.getElementById("n").innerHTML=noe;
t++;
t= t<slidingClass.prototype.imgL("img") ? t:0;
slidingClass.id.onmousemove=function(){
clearTimeout(c);
}
slidingClass.id.onmouseout=function(){
c=setTimeout("slidingClass.prototype.loop()",slidingClass.timer);
}
},
start:function(){
slidingClass.prototype.hidden();
slidingClass.prototype.loop();
}
}
</script>
<div id="n">
</div>
<div class="box" id="box">
<img src="http://image.zcool.com.cn/bigPic/1359774079165.jpg" width="1083" height="350" />
<img src="http://image.zcool.com.cn/bigPic/1359774008854.jpg" width="1083" height="350" />
<img src="http://image.zcool.com.cn/bigPic/1359774064447.jpg" width="1083" height="350" />
<ul id="li">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class="shuming">
转载注明：本效果出自:<a href="http://suiyidian.cn">suiyidian.cn</a>
</div>
<style type="text/css">
.box{
width:1083px;
height:350px;
overflow:hidden;
margin:200px auto 0px;
border:3px #fff solid;
position:relative;
cursor:pointer;
}
.box img{filter:alpha(opacity=100)}
#li{padding:0px; overflow:hidden; position:absolute; right:15px; bottom:15px; z-index:999; height:22px;}
#li,#li *{ margin:0px; padding:0px}
#li li{ display:inline; float:left; height:20px; line-height:20px; font-size:12px; width:20px; color:#fff; background:#093; border:1px solid #fff; text-align:center; margin-left:3px}
#li li.hove{ background:#0C0; font-weight:bold}
.shuming {
background: none repeat scroll 0 0 #333333;
border: 1px solid #FFFFFF;
color: #FFFFFF;
font-size: 12px;
height: 20px;
line-height: 20px;
margin: 15px auto 0;
text-align: center;
width: 285px;
}
.shuming a{color:#fff; text-decoration:none}
.shuming a:hover{ text-decoration:underline; color:red}
</style>
<script>
var hd=new slidingClass("box");
hd.start()
</script>
</body>
</html>

码农公寓

相关文章