javascript特效（二）图片自动播放

最新推荐文章于 2024-10-10 07:27:03 发布

原创最新推荐文章于 2024-10-10 07:27:03 发布 · 256 阅读

CC 4.0 BY-SA版权

文章标签：


<style type="text/css">
#btn span{
	font-size:15px;
	height:15px;
	width:15px;
	background-color:#00ff00;
	border:1px solid #0066FF;
	text-align:center;
	margin-right:1px;
	float:left;
	cursor:pointer;
}
#btn span.hov{
	background-color: #0099FF;
}
p{
	border:#336666 solid 1px;
}
</style>


<div id="wai" style="cursor:pointer; margin:0px; height:88px; width:650px; overflow:hidden; position:relative;" onmouseover="clearAuto()" onmouseout="setAuto()">
    <div id="image1" style="position:relative;top:0px; left:0px; height:88px; width:650px;">
      <p style="background-color:#66ddff;display:block; width:650px; height:88px;" alt="00">111111111111111
      <p style="background-color:#66CC00;display:block; width:650px; height:88px;" alt="11">222222222222222
      <p style="background-color:#66FF66;display:block; width:650px; height:88px;" alt="22">333333333333333
      <p style="background-color:#88CC22;display:block; width:650px; height:88px;" alt="33">444444444444444
      <p style="background-color:#553366;display:block; width:650px; height:88px;" alt="44">555555555555555
    </div>
	<!-- 幻灯片切换按钮-->
    <div id="btn" style="position:absolute; bottom:0px; right:0px; width:96px; ">
        <span class="hov" onmouseover="set(0)"><font size="2">1</font></span>
        <span onmouseover="set(1)"><font size="2">2</font></span>
        <span onmouseover="set(2)"><font size="2">3</font></span>
        <span onmouseover="set(3)"><font size="2">4</font></span>
        <span onmouseover="set(4)"><font size="2">5</font></span>
    </div>
</div>


<!-- javascript-->
<script type="text/javascript">
var n = 0;
var banner = false;
var numlist = document.getElementById("btn").getElementsByTagName("span");
var imglist = document.getElementById("image1").getElementsByTagName("p");

function set(value){
	//alert("value = "+value);
	n=value;
	document.getElementById("image1").style.filter="revealtrans(duration=2,transition="+Math.random()*24+")"; //自动生成滤镜效果（切换内容）
	for(var i=0;i<5;i++){
		i==value?numlist[i].className="hov":numlist[i].className=" ";//设置数字的css样式
	}
	try{
		with(image1){//火狐不支持滤镜效果，借用with来区分IE和火狐，火狐将用catc里的方式显示
			filters[0].apply();//以下为设置图片的
			for(i=0;i<5;i++) i==value?imglist[i].style.display="block":imglist[i].style.display="none";
				document.getElementById("image1").filters[0].play();
		}
	}catch(e){
		var j=0;
		for(;j<5;j++) {
			j==value?imglist[j].style.display="block":imglist[j].style.display="none";
		}
	}
}        
//自动播放幻灯片
function auto(){
	n++;
	if(n>=5) n=0;
	set(n);
}
function clearAuto(){clearInterval(banner);}
function setAuto(){clearInterval(banner);banner=setInterval("auto()",4000)};
setAuto();
</script>