<!DOCTYPE html>
<html>
<head>
<title>幻燈片</title>
<style>
.div1{
height: 520px;
width: 950px;
border: 1px solid red;
}
div ul{
float: right;
}
div ul li{
margin-top:70px;
margin-right:10px;
list-style: none;
border: 1px solid blue;
padding: 4px;
width: 12px;
cursor: pointer;
}
</style>
<script type="text/javascript" language="javascript">
window.onload=fn;
// 初始化，設置定時器
function fn(){
var yanse1=document.getElementById("li1");
yanse1.style.background="green"
hdp_t=window.setInterval("huandengpian()",1000);
}
var i=1;
// 幻燈片播放，播放哪一張就給哪一張的按鈕背景色
function huandengpian(){
i++;
var img1=document.getElementById('img1');
if (i>4) {
i=1;
}
img1.src=i+".jpg";
yanse();
var ys=document.getElementById("li"+i);
ys.style.background="green";
}
//啓動定時器播放幻燈片
function start(){
hdp_t=window.setInterval("huandengpian()",1000);
}
//
function stop(){
window.clearInterval(hdp_t);
}
// 鼠標放在數字上停止相應的圖片，並且給背景色
function tingtu(n,m){
i=n;
var obj=document.getElementById("img1");
yanse();
obj.src=n+".jpg";
m.style.background="green"
window.clearInterval(hdp_t);
}
// 清楚顏色
function yanse(){
for(var j=1;j<=4;j++){
var Allobj=document.getElementById("li"+j);
Allobj.style.background="white";
}
}
</script>
</head>
<body >
<div class="div1">
<img src="1.jpg" id="img1" onmouseover="stop()" onmouseout="start()">
<ul>
<li id="li1" onmouseover="tingtu(1,this)" onmouseout="start()">1</li>
<li id="li2" onmouseover="tingtu(2,this)" onmouseout="start()">2</li>
<li id="li3" onmouseover="tingtu(3,this)" onmouseout="start()">3</li>
<li id="li4" onmouseover="tingtu(4,this)" onmouseout="start()">4</li>
</ul>
</div>
</body>
</html>
【JS】幻燈片
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
spa頁面，不同組件按需引入js，aliplayer
(function(d, s, id) { let js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) retur