类似于falsh图片切换效果
<!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>类似于falsh图片切换效果</title>
<style type="text/css">
body{margin:0px; padding:0px;}
.adv{position:relative; width:360px;}
.frames{}
.change{width:100%; position:absolute; right:0px; bottom:0px; z-index:999; background-color:#000; opacity:0.3;}
.change a{display:block; padding:2px 10px; border:1px solid #A7BEF3; text-decoration:none; color:#FFF; float:left; text-align:center; margin-right:2px;}
.change a:hover{background-color:#ccc; color:#F00;}
</style>
<script type="text/javascript">
var i=1;
function autoChange()
{
var img=document.getElementById("img");
img.src="images/"+i+".jpg";
i++;
if(i==7)i=1
window.setTimeout("autoChange()",1000);
}
function chaImg(num)
{
var img=document.getElementById("img");
img.src="images/"+num+".jpg";
}
</script>
</head>
<body onload="autoChange()" >
<div class="adv">
<img id="img" src="images/1.jpg" />
<div class="change">
<div style="float:right;">
<a href="javascript:chaImg('1')" onmouseover="chaImg('1')">1</a>
<a href="javascript:chaImg('2')" onmouseover="chaImg('2')">2</a>
<a href="javascript:chaImg('3')" onmouseover="chaImg('3')">3</a>
<a href="javascript:chaImg('4')" onmouseover="chaImg('4')">4</a>
<a href="javascript:chaImg('5')" onmouseover="chaImg('5')">5</a>
<a href="javascript:chaImg('6')" onmouseover="chaImg('6')">6</a>
</div>
<div style="clear:both;"></div>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>类似于falsh图片切换效果</title>
<style type="text/css">
body{margin:0px; padding:0px;}
.adv{position:relative; width:360px;}
.frames{}
.change{width:100%; position:absolute; right:0px; bottom:0px; z-index:999; background-color:#000; opacity:0.3;}
.change a{display:block; padding:2px 10px; border:1px solid #A7BEF3; text-decoration:none; color:#FFF; float:left; text-align:center; margin-right:2px;}
.change a:hover{background-color:#ccc; color:#F00;}
</style>
<script type="text/javascript">
var i=1;
function autoChange()
{
var img=document.getElementById("img");
img.src="images/"+i+".jpg";
i++;
if(i==7)i=1
window.setTimeout("autoChange()",1000);
}
function chaImg(num)
{
var img=document.getElementById("img");
img.src="images/"+num+".jpg";
}
</script>
</head>
<body onload="autoChange()" >
<div class="adv">
<img id="img" src="images/1.jpg" />
<div class="change">
<div style="float:right;">
<a href="javascript:chaImg('1')" onmouseover="chaImg('1')">1</a>
<a href="javascript:chaImg('2')" onmouseover="chaImg('2')">2</a>
<a href="javascript:chaImg('3')" onmouseover="chaImg('3')">3</a>
<a href="javascript:chaImg('4')" onmouseover="chaImg('4')">4</a>
<a href="javascript:chaImg('5')" onmouseover="chaImg('5')">5</a>
<a href="javascript:chaImg('6')" onmouseover="chaImg('6')">6</a>
</div>
<div style="clear:both;"></div>
</div>
</div>
</body>
</html>