图片动态切换

最新推荐文章于 2022-05-19 13:01:36 发布

卡布奇诺Princes

最新推荐文章于 2022-05-19 13:01:36 发布

阅读量1.2k

点赞数 1

分类专栏：知识总结文章标签： javascript

本文链接：https://blog.csdn.net/zsj523/article/details/8635339

版权

知识总结专栏收录该内容

186 篇文章 1 订阅

订阅专栏

<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
*{margin:0;padding:0;border:0}
#main{width:450px;height:400px;background-color:green;margin:auto}
#head{height:350px;background-color:blue}
#head img{width:440px;height:340px;padding-left:5px;padding-top:5px}
#content li{list-style:none;float:left;width:35px;height:30px;border:1px solid orange;text-align:center;line-height:30px;margin-top:8px}
#content ul{width:360px;margin:auto;margin-right:5px;}
</style>
</head>

<body>
<div id="main">
<div id="head">
<img src="./1.jpg" id="a1"/>
</div>
<div id="content">
<ul>
<li id="q1" οnmοuseοver="stopmouse(1)" οnmοuseοut="startmove(1)">1<>
<li id="q2" οnmοuseοver="stopmouse(2)" οnmοuseοut="startmove(2)">2<>
<li id="q3" οnmοuseοver="stopmouse(3)" οnmοuseοut="startmove(3)">3<>
<li id="q4" οnmοuseοver="stopmouse(4)" οnmοuseοut="startmove(4)">4<>
<li id="q5" οnmοuseοver="stopmouse(5)" οnmοuseοut="startmove(5)">5<>
<li id="q6" οnmοuseοver="stopmouse(6)" οnmοuseοut="startmove(6)">6<>
<li id="q7" οnmοuseοver="stopmouse(7)" οnmοuseοut="startmove(7)">7<>
<li id="q8" οnmοuseοver="stopmouse(8)" οnmοuseοut="startmove(8)">8<>
</ul>
</div>
</div>
</body>
<script>
var n = 1; //当前图片
var t;
var img1 = document.getElementById("a1");
imgmove();
function imgmove()
{
for(var j=1;j<=8;j++)
{
document.getElementById('q'+j).style.backgroundColor = 'green';
}
if(n<9)
{
img1.src="./"+n+".jpg";
document.getElementById("q"+n).style.backgroundColor = 'orange';
n++;
}
if(n==9)
{
n=1;
}
t = setTimeout("imgmove()",1000);
}
function stopmouse(x)
{
for(var j=1;j<=8;j++)
{
document.getElementById('q'+j).style.backgroundColor = 'green';
}
img1.src="./"+x+".jpg";
document.getElementById("q"+x).style.backgroundColor = 'orange';
clearTimeout(t);
}
function startmove(y)
{
n=y+1;
imgmove();
}
</script>
<html>