大图轮播
图片轮播
<!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">
#tu{
width:700px;
height:500px;
float:left;
}
.img{
display:none;}
</style>
</head>
<body>
<div id="tu">
<img class="img" style="display:block" src="9d9376fa-b035-4bf3-9b95-0e2cd92f386e.jpg" width="700" height="500" />
<img class="img" src="44ab5520-41e9-4bd7-bd0e-ea6dde13b89b.jpg" width="700" height="500" />
<img class="img" src="77ecb4e3-1de5-4a4f-b165-400c59a71433.jpg" width="700" height="500" />
<img class="img" src="32680e0e-45e3-45e5-8ccf-f5faa452c22a.jpg" width="700" height="500" />
<img class="img" src="2184009b-c1d9-4376-8ac9-e396016efc56.jpg" width="700" height="500" />
</div>
</body>
<script type="text/javascript">
window.setInterval("Huan()",1000);
var sy = 0;
function Huan()
{
var img = document.getElementsByClassName("img");
sy++;
if(sy>=img.length)
{
sy = 0;
}
for(var i=0;i<img.length;i++)
{
img[i].style.display = "none";
}
img[sy].style.display = "block";
}
</script>
</html>
加入原点
<!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">
#tu{
width:700px;
height:500px;
float:left;
}
.img{
display:none;}
#yuandian{
width:500px;
height:20px;
margin-top:450px;
margin-left:-200px;
float:left;}
.dian{
width:20px;
height:20px;
border:5px solid red;
border-radius:50%;
float:left;
margin-left:10px;
}
</style>
</head>
<body>
<div id="tu">
<img class="img" style="display:block" src="9d9376fa-b035-4bf3-9b95-0e2cd92f386e.jpg" width="700" height="500" />
<img class="img" src="44ab5520-41e9-4bd7-bd0e-ea6dde13b89b.jpg" width="700" height="500" />
<img class="img" src="77ecb4e3-1de5-4a4f-b165-400c59a71433.jpg" width="700" height="500" />
<img class="img" src="32680e0e-45e3-45e5-8ccf-f5faa452c22a.jpg" width="700" height="500" />
<img class="img" src="2184009b-c1d9-4376-8ac9-e396016efc56.jpg" width="700" height="500" />
</div>
<div id="yuandian">
<div sy="0" class="dian" style="border-color:blue"></div>
<div sy="1" class="dian"></div>
<div sy="2" class="dian"></div>
<div sy="3" class="dian"></div>
<div sy="4" class="dian"></div>
</div>
</body>
<script type="text/javascript">
window.setInterval("Huan()",1000);
var sy = 0;
function Huan()
{
var img = document.getElementsByClassName("img");
sy++;
if(sy>=img.length)
{
sy = 0;
}
for(var i=0;i<img.length;i++)
{
img[i].style.display = "none";
}
img[sy].style.display = "block";
var d = document.getElementsByClassName("dian");
for(var j=0;j<d.length;j++)
{
if(d[j].getAttribute("sy")==sy)
{
d[j].style.borderColor = "blue";
}
else
{
d[j].style.borderColor = "red";
}
}
}
</script>
</html>