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

javascript DOM图片切换

2013-03-03 12:45 127 查看

<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:350px;padding-left:5px;padding-right:5px}

#cont li{float:left;list-style:none;width:35px;height:30px;text-align:center;line-height:30px;margin-right:5px;border:1px solid orange}

#cont ul{width:360px;margin:auto;margin-top:5px}

</style>

<script>

//先定义一个计数器，统计图片

var count = 1;

//周期函数的返回值

var interval = '';

function changePic(){

var myimg = document.getElementById("show");

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(n){

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>

</head>

<body onload="start_chan()">

<div id="main">

<div id="head">

<img id="show" src="1.jpg" onmouseover="stop_chan()" onmouseout="start_chan()"/>

</div>

<div id="cont">

<ul>

<li id="num1" onmouseover="choosePic(1)" onmouseout="start_chan()">1</li>

<li id="num2" onmouseover="choosePic(2)" onmouseout="start_chan()">2</li>

<li id="num3" onmouseover="choosePic(3)" onmouseout="start_chan()">3</li>

<li id="num4" onmouseover="choosePic(4)" onmouseout="start_chan()">4</li>

<li id="num5" onmouseover="choosePic(5)" onmouseout="start_chan()">5</li>

<li id="num6" onmouseover="choosePic(6)" onmouseout="start_chan()">6</li>

<li id="num7" onmouseover="choosePic(7)" onmouseout="start_chan()">7</li>

<li id="num8" onmouseover="choosePic(8)" onmouseout="start_chan()">8</li>

</ul>

</div>

</div>

</body>

</html>

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

标签：

相关文章推荐

新的分享

章节导航