兼容IE和FF的图片轮换，滤镜效果，纯js
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>广告代码演示</title>
<style type="text/css">
img {border:0px;}
.col1
{
background-image:url(images/whitebg.jpg);
background-repeat:no-repeat;
float:right;
width:12px;
height:12px;
margin:0 5px;
cursor:pointer;
}
.col2
{
background-image:url(images/yellowbg.jpg);
background-repeat:no-repeat;
float:right;
width:12px;
height:12px;
margin:0 5px;
cursor:pointer;
}
</style>
<script>
var img1 = document.createElement("img");
var img2 = document.createElement("img");
var img3 = document.createElement("img");
img1.src = "images/1.jpg";
img2.src = "images/2.jpg";
img3.src = "images/3.jpg";
</script>
<script language="javascript">
var index=1;
var object1="";
var sint=null;
var Descint=null;
function auto()
{
tip(index);
index+=1;
if(index>3)
{
index=1;
}
}
function tip(par)
{
if(sint!=null)
{
clearInterval(sint);
sint=null;
}
if(Descint!=null)
{
clearInterval(Descint);
Descint=null;
}
for(var i=1;i<4;i++)
{
object1="oDIV"+i;
document.getElementById(object1).style.display="none";
}
document.getElementById("test").style.display="none";
object1="oDIV"+par;
document.getElementById(object1).style.display="";
if(par==1)
{
document.getElementById('test').style.backgroundImage = "url(images/1.jpg)";
document.getElementById('test').style.backgroundPosition = "top";
}
if(par==2)
{
document.getElementById('test').style.backgroundImage = "url(images/2.jpg)";
document.getElementById('test').style.backgroundPosition = "top";
}
if(par==3)
{
document.getElementById('test').style.backgroundImage = "url(images/3.jpg)";
document.getElementById('test').style.backgroundPosition = "top";
}
document.getElementById("col1").className="col1";
document.getElementById("col2").className="col1";
document.getElementById("col3").className="col1";
document.getElementById("col"+par).className="col2";
fadeIn();
}
/*滤镜的方法，重复调用时直接调用该方法*/
function filters(counter)
{
document.getElementById(object1).style.display="block";
document.getElementById("test").style.display="block";
document.getElementById(object1).style.filter = 'alpha(opacity='+counter+')';
document.getElementById(object1).style.opacity = counter / 100;
document.getElementById("test").style.filter = 'alpha(opacity='+counter+')';
document.getElementById("test").style.opacity = counter / 100;
}
/*图片淡入方法*/
function fadeIn()
{
var count = 0;
sint = setInterval(function(){
count +=5;
if(count > 100){
clearInterval(sint);
sint=null;
setTimeout(fadeOut,3000);
}
else
{
filters(count);
}
},10);
}
/*图片淡出方法*/
function fadeOut()
{
var Descount = 100;
Descint = setInterval(function(){
Descount-=20;
if(Descount <0){
clearInterval(Descint);
Descint=null;
auto();
}
else
{
filters(Descount);
}
},10);
}
</script>
</head>
<body>
<div id="test" style="width:100%; height:350px; border:1px solid red;">
<center>
<div style="width:778px; margin:0 auto;"><table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href="#" target="_blank" id="1"><img class=pic id=oDIV1 src="images/4.jpg" width=788 height=330 ></a>
<a href="#" target="_blank" id="2"><img class=pic id=oDIV2 src="images/5.jpg" width=788 height=330 style="DISPLAY: none;"></a>
<a href="#" target="_blank" id="3"><img class=pic id=oDIV3 src="images/6.jpg" width=788 height=330 style="DISPLAY: none;"></a>
<div style="position:absolute; float:right; left:45%; top:270px;">
<div id="col1" onClick="tip(1)"></div>
<div id="col2" onClick="tip(2)"></div>
<div id="col3" onClick="tip(3)"></div>
</div>
</td>
</tr>
</table>
</div></center>
</div>
</body>
</html>
<script>
window.onload=function (){
document.getElementById('test').style.backgroundImage = "url(images/1.jpg)";
document.getElementById('test').style.backgroundPosition = "top";
}
auto();
</script>
留着以后用，
