您的位置：首页 > Web前端 > JavaScript

【JS】幻灯片

2017-01-30 20:58 351 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航