网页幻灯片

最新推荐文章于 2024-04-18 10:13:27 发布

吉利来

最新推荐文章于 2024-04-18 10:13:27 发布

阅读量496

点赞数

文章标签： HTMLscript

本文链接：https://blog.csdn.net/zhuangjixiang/article/details/8607429

版权

<!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>幻灯片</title>
<style type="text/css">
#divImg{
	width:350px;
	height:200px;
	position:relative;
}
#divImg img{
	display:none;
}
#divNum{
	position:absolute;
	z-index:9;
	bottom:0px;
	right:0px;
}
#divNum a{
	background-color:#CCC;
	color:#000;
	width:25px;
	height:25px;
	text-align:center;
	line-height:25px;
	display:inline-block;
	text-decoration:none;
	
	filter:alpha(opacity=70);       /* IE */
	-moz-opacity:0.7;              /* 老版Mozilla */
	-khtml-opacity:0.7;              /* 老版Safari */
	opacity: 0.7;           /* 支持opacity的浏览器*/

}
#divNum a:hover{
	background-color:#F00;
	color:#FFF;
}
</style>
<script type="text/javascript" language="javascript">
    var startTime;
	function starTime(){
		startTime=window.setInterval("showImg()",1500);
	}
	var index=1;
	function showImg(){
		index++;
		if(index>5){
			index=1;
		}
		imgPlay();
		
	}
	function imgPlay(){
		for(var i=1;i<=5;i++){
			var myImg=document.getElementById("img"+i);
			var myA=document.getElementById("a"+i);
			if(index==i){
				myImg.style.display="block";
				myA.style.backgroundColor="red";
				myA.style.color="#FFF";
			}else {
				myImg.style.display="none";
				myA.style.backgroundColor="#CCC";
				myA.style.color="#000";
			}
		}
	}
	function show(num){
		window.clearInterval(startTime);
		index=num;
		imgPlay();
	}
	function startPlay(){
		starTime();
	}
</script>
</head>

<body οnlοad="starTime();">
	<div id="divImg">
    	<img src="img1.jpg" id="img1" style="display:block;"/>
        <img src="img2.jpg" id="img2"/>
        <img src="img3.jpg" id="img3"/>
        <img src="img4.jpg" id="img4"/>
        <img src="img5.jpg" id="img5"/>
        <div id="divNum">
        	<a href="#" id="a1" οnmοuseοver="show(1)" οnmοuseοut="startPlay()"/>1</a>
            <a href="#" id="a2" οnmοuseοver="show(2)" οnmοuseοut="startPlay()"/>2</a>
            <a href="#" id="a3" οnmοuseοver="show(3)" οnmοuseοut="startPlay()"/>3</a>
            <a href="#" id="a4" οnmοuseοver="show(4)" οnmοuseοut="startPlay()"/>4</a>
            <a href="#" id="a5" οnmοuseοver="show(5)" οnmοuseοut="startPlay()"/>5</a>
        </div>
    </div>    
</body>
</html>

吉利来

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
网页幻灯片

幻灯片#divImg{ width:350px; height:200px; position:relative;}#divImg img{ display:none;}#divNum{ position:absolute; z-index:9; bottom:0px; right:0px;}#divNum a{ background-color:#CCC; c
复制链接

扫一扫

网页 幻灯片

网页幻灯片