五.大图轮播
<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">
*{
margin:auto
}
#datu{
800px;
height:500px;
}
.tu{
display:none;
}
#yuandian{
800px;
height:80px;
position:relative;
margin-top:-80px;
}
.dian{
100px;
height:50px;
float:left;
background-color:#F00;
margin-left:50px;
}
</style>
</head>
<body>
<div id="datu">
<img class="tu" src="44ab5520-41e9-4bd7-bd0e-ea6dde13b89b.jpg" style="display:block" width="800" height="500"/>
<img class="tu" src="9d9376fa-b035-4bf3-9b95-0e2cd92f386e.jpg" width="800" height="500"/>
<img class="tu" src="77ecb4e3-1de5-4a4f-b165-400c59a71433.jpg" width="800" height="500"/>
<img class="tu" src="2184009b-c1d9-4376-8ac9-e396016efc56.jpg" width="800" height="500"/>
<img class="tu" src="32680e0e-45e3-45e5-8ccf-f5faa452c22a.jpg" width="800" height="500"/>
</div>
<div id="yuandian">
<div class="dian" onmouseover="xuan('0')" style="background-image:url(44ab5520-41e9-4bd7-bd0e-ea6dde13b89b.jpg); background-size:100% 100%; 120px; height:70px; margin-left:40px"></div>
<div class="dian" onmouseover="xuan('1')" style="background-image:url(9d9376fa-b035-4bf3-9b95-0e2cd92f386e.jpg); background-size:100% 100%"></div>
<div class="dian" onmouseover="xuan('2')" style="background-image:url(77ecb4e3-1de5-4a4f-b165-400c59a71433.jpg); background-size:100% 100%"></div>
<div class="dian" onmouseover="xuan('3')" style="background-image:url(2184009b-c1d9-4376-8ac9-e396016efc56.jpg); background-size:100% 100%"></div>
<div class="dian" onmouseover="xuan('4')" style="background-image:url(32680e0e-45e3-45e5-8ccf-f5faa452c22a.jpg); background-size:100% 100%"></div>
</div>
</body>
<script type="text/javascript">
window.setInterval("bian()",3000) //设置每隔3000毫秒执行一次该函数
var xu=0 //定义一个变量xu，值为0 这理解为第一张图
function bian()
{
var x=document.getElementsByClassName("tu") //找到大图元素数组并定义为变量x
xu++; //变量xu值+1
if(xu==x.length) //当xu值为大图数组长度时，让其为0。这理解为当走到第6张图时让其从第一张图开始走
{
xu=0
}
for(var i=0;i<x.length;i++) //遍历x 使该数组所有元素样式隐藏，所有图片隐藏
{
x[i].style.display="none"
}
x[xu].style.display="block"; //让第二张图显示
var y=document.getElementsByClassName("dian") //找到小图数组素并定义变量y
for(var i=0;i<y.length;i++) //让小图样式全部恢复默认
{
y[i].style.width="100px";
y[i].style.height="50px";
y[i].style.marginLeft="50px";
}
y[xu].style.width="120px"; //让第二张小图样式改变
y[xu].style.height="70px";
y[xu].style.marginLeft="40px"
}
function xuan(a) //手动换图 思路：移到该小图时让其他大图片隐藏，显示该序号大图片。同时让该小图样式改变，其他恢复默认。
{
xu=a //将实参赋值给轮播序号，让它从该序号开始轮播
var tu=document.getElementsByClassName("tu") //找到大图元素数组并定义变量tu
for(var i=0;i<tu.length;i++)
{
tu[i].style.display="none" //让大图全部隐藏
}
tu[a].style.display="block"; //接收实参使该序号大图元素显示
var dian=document.getElementsByClassName("dian") //找到小图元素数组并定义变量dian
for(var i=0;i<dian.length;i++)
{
dian[i].style.width="100px"; //让小图全部恢复默认
dian[i].style.height="50px";
dian[i].style.marginLeft="50px"
}
dian[a].style.width="120px"; //接收实参使该序号小图样式改变
dian[a].style.height="70px";
dian[a].style.marginLeft="40px"
}
</script>
</html>
