JS——图片切换

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片切换</title>

<style type="text/css">
/*样式*/
body{background: url("bg.jpg");background-size: cover ; display: block}
.img img{margin: 100px 300px 0px 300px;}
.img ul li{float: left;list-style-type: none;margin: 0px 20px 0px 20px;
border: 1px solid black;width: 20px;height: 20px;text-align: center;}
.ul{margin: 0px 100px 0px 450px;}
.img ul li:hover{cursor: pointer;}
</style>
<script type="text/javascript">
//页面加载完执行的函数
window.onload=init;
//定义一个定时器的名字
var timer;
//页面加载完后，立即执行, 反复定时器启动
function init() {timer = window.setInterval("hmgeSwilcher()",1000);
var obj = document.getElementById("li1");obj.style.background="#990000"}
//定义一个全局变量
var i=1;
//图片切换的函数
function hmgeSwilcher() {
i++;
if(i>6)
{
i=1;
}
//得到图片对象
var obj=document.getElementById("img1");
//改变它的src属性，达到图片切换的工作
obj.src="scroll_"+i+".jpg";
//调用清除颜色函数，清除掉其余的颜色
clear_color();
//得到当前图片所对应的li标签
var object = document.getElementById("li"+i);
//改变它的背景颜色
object.style.background="#990000";
}
//当鼠标移上图片上时，启动该函数，清除定时器
function Img_Stop() {
//清除定时器,使图片停止
window.clearInterval(timer);
}
//当鼠标离开图片时，启动该函数，启动定时器
function Img_Start() {
//启动定时器，使图片切换
timer = window.setInterval("hmgeSwilcher()",1000);
}
//当鼠标移到li标签上，启动该函数
function Stop_the_flood(obj) {
//得到图片的对象
var object = document.getElementById("img1");
//得到所传过来的li标签对象的内容
var j = obj.innerHTML;
//将该值赋给全局变量 i,使图片切换的时候不会乱套
i=j;
//改变图片对象的src属性
object.src="scroll_"+j+".jpg";
//调用清除颜色的函数
clear_color();
//清除定时器，使图片停止
window.clearInterval(timer);
//设置当前图片对应li标签的背景颜色
obj.style.background="#990000";
}
//当鼠标离开li标签时，启动函数
function Start_the_flood() {
//启动定时器，是图片继续切换
timer = window.setInterval("hmgeSwilcher()",1000);
}
//清除 li 标签的背景颜色的函数
function clear_color() {
for(var j = 1;j<=6;j++)
{
//遍历每个标签，得到它们对象，进行一一清除
var allobj = document.getElementById("li"+j);
allobj.style.background="white";
}
}
</script>
</head>
<body>
<div class="img">
<img src="scroll_1.jpg" id="img1" onmouseover="Img_Stop()" onmouseout="Img_Start()"/>
<ul class="ul">
<li id="li1" onmouseover="Stop_the_flood(this)" onmouseout="Start_the_flood()">1</li>
<li id="li2" onmouseover="Stop_the_flood(this)" onmouseout="Start_the_flood()">2</li>
<li id="li3" onmouseover="Stop_the_flood(this)" onmouseout="Start_the_flood()">3</li>
<li id="li4" onmouseover="Stop_the_flood(this)" onmouseout="Start_the_flood()">4</li>
<li id="li5" onmouseover="Stop_the_flood(this)" onmouseout="Start_the_flood()">5</li>
<li id="li6" onmouseover="Stop_the_flood(this)" onmouseout="Start_the_flood()">6</li>
</ul>
</div>
</body>
</html>

猜你喜欢