写网页必会的模块

最新推荐文章于 2024-02-23 16:20:17 发布

sa1176732685

最新推荐文章于 2024-02-23 16:20:17 发布

阅读量741

点赞数

文章标签： JavaScript div FUNCTION button String

本文链接：https://blog.csdn.net/sa1176732685/article/details/8635064

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta charset="utf-8">
<style>
   *{margin:0;padding:0;border:0}
   #content li{float:left;list-style:none;height:30px;width:40px;text-align:center;line-height:30px;border:1px solid orange;margin-right:10px}
   #content{margin-top:10px;margin-left:50px}
   #head img{width:490px;height:340px;margin-left:5px;margin-top:5px}
   #head li{list-style:none}
</style>
</head>

<body οnlοad="uu()">
<div id="main" style="width:500px;height:400px;margin:auto;background-color:green">
    <div id="head" style="width:500px;height:350px;background-color:blue">
<ul>
         <li id="img1"><img src="
   1.jpg" id="img" οnmοuseοver='end_change()' οnmοuseοut="uu()"></li>

</ul>
</div>
     <div id="content" >
<ul>
       <li id="li1" style="background-color:orange" οnmοuseοver='over(1)' οnmοuseοut="uu()">1</li>
    <li id="li2" οnmοuseοver='over(2)' οnmοuseοut="uu()" >2</li>
    <li id="li3" οnmοuseοver='over(3)' οnmοuseοut="uu()" >3</li>
    <li id="li4" οnmοuseοver='over(4)' οnmοuseοut="uu()" >4</li>
    <li id="li5" οnmοuseοver='over(5)' οnmοuseοut="uu()" >5</li>
</ul>
</div>
</div>
</body>
<script>
var count=1;
var id;
function changepic(){
   var img=document.getElementById('img');
   if(count == 6){
   count =1;
   }
   img.src=count+".jpg";
   for(var i=1;i<=5;i++){
     document.getElementById("li"+i).style.backgroundColor="green";
   }
   document.getElementById("li"+count).style.backgroundColor="orange";
   count++;
}
function uu(){
   id=setInterval("changepic()",1000);
}
function end_change(){
   clearInterval(id);
}
function over(n){
end_change();
for(var i=1;i<=5;i++){
document.getElementById("li"+i).style.backgroundColor="green";
}
document.getElementById("li"+n).style.backgroundColor="orange";
   document.getElementById("img").src=n+".jpg";
   count=n;

}
</script>
</html>

sa1176732685

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
写网页必会的模块

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml"> new document *{margin:0;padding:0;border:0} #content li{float:left;list
复制链接

扫一扫