document操作例題3
阿新 • • 發佈：2018-04-09
操作 20px .com function for .get org oat bubuko
五.大圖輪播
<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{
width:800px;
height:500px;
}
.tu{
display:none;
}
#yuandian{
width:800px;
height:80px;
position:relative;
margin-top:-80px;
}
.dian{
width: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%; width: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>
document操作例題3