完成图片动态切换_页面设计中图片动图切换-CSDN博客

本文链接：https://blog.csdn.net/mz_shenbian/article/details/8639349

完成图片动态切换

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; border:0;}
#main{ width:450px; height:400px; background-color:#060; margin:auto;}
#head{height:350px; background-color:#6F0;}
#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 #FF0; text-align:center; line-height:30px; margin-top:8px}
#content ul{ width:360px; margin-right:5px; margin:auto;}
</style>
</head>

<body Xοnlοad="start_chan()">
<div id="main">
<div id="head">
<img id="img" src="1.jpg" Xοnmοuseοver="stop_chan()" Xοnmοuseοut="start_chan()"/>
</div>
<div id="content">
<ul>
<li id="num1" Xοnmοuseοver="choosePic(1)" Xοnmοuseοut="start_chan()">1</li>
<li id="num2" Xοnmοuseοver="choosePic(2)" Xοnmοuseοut="start_chan()">2</li>
<li id="num3" Xοnmοuseοver="choosePic(3)" Xοnmοuseοut="start_chan()">3</li>
<li id="num4" Xοnmοuseοver="choosePic(4)" Xοnmοuseοut="start_chan()">4</li>
<li id="num5" Xοnmοuseοver="choosePic(5)" Xοnmοuseοut="start_chan()">5</li>
<li id="num6" Xοnmοuseοver="choosePic(6)" Xοnmοuseοut="start_chan()">6</li>
<li id="num7" Xοnmοuseοver="choosePic(7)" Xοnmοuseοut="start_chan()">7</li>
<li id="num8" Xοnmοuseοver="choosePic(8)" Xοnmοuseοut="start_chan()">8</li>
</ul>
</div>
</div>
</body>
<script>
//先定义一个计数器，统计图片
var count = 1;
//周期函数的返回值
var interval = '';
function changePic(){
var myimg = document.getElementById("img");
if(count == 8){
count = 0;
}
var k = ++count;
myimg.src = k+".jpg";
//图片修改后，序号背景色也要发生变化
//先将所有的序号颜色恢复
for(var i=1;i<=8;i++){
document.getElementById("num"+i).style.backgroundColor = '';
}
//将当前序号设置背景色
document.getElementById("num"+k).style.backgroundColor = "yellow";
}

//间歇性函数实现图片周期变换
function start_chan(){

interval = setInterval("changePic()",1000);
}
//停止周期函数
function stop_chan(){
clearInterval(interval);
}
function choosePic{
stop_chan();
document.getElementById("show").src = n+".jpg";
for(var i=1;i<=8;i++){
document.getElementById("num"+i).style.backgroundColor = '';
}
document.getElementById("num"+n).style.backgroundColor = "yellow";
count = n;
}
</script>
</html>