<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<style type="text/css" >
a { text-decoration:none; color:blue;}
#div1 { 400px; height:298px; background-color:Blue; overflow:hidden; position:absolute; top:50px; left:40px;}
#div2 { filter: alpha(opacity=50); 400px; height:20px; color:Orange; background-image: url('img/bg.jpg'); background-repeat:repeat-x; position:absolute; left:40px; top :330px; }
#div3 { 400px; height:20px; color:Blue; background-color:yellow; position:absolute; left:40px; top :350px; }
img { filter: alpha(opacity=100); 400px; height:300px;}
#div2 span{ cursor:pointer;}
</style>
<script type="text/javascript" src="my_js.js"></script>
<script type="text/javascript" language="javascript">
//初始化图片
var img_Array = new Array();
for (var i = 0; i < 4; i++) {
img_Array[i] = new Image();
}
img_Array[0].src = "img/1.jpg";
img_Array[0].text = "<a href='http://www.baidu.com'>这是第1个</a>";
img_Array[0].index = 1;
img_Array[1].src = "img/2.jpg";
img_Array[1].text = "这是第2个";
img_Array[1].index = 2;
img_Array[2].src = "img/3.jpg";
img_Array[2].text = "这是第3个";
img_Array[2].index = 3;
img_Array[3].src = "img/4.jpg";
img_Array[3].text = "这是第4个";
img_Array[3].index = 4;
//初始化时赋值，加入事件
window.onload = function () {
var j = 0;
var timer = null;
var oimg = document.getElementById("img1");
var odiv_txt = document.getElementById("div3");
oimg.src = img_Array[0].src;
odiv_txt.innerHTML = img_Array[0].text;
timer = setInterval(function () {
auto(j++);
if (j >= 3) { j = -1; }
}, 3000);
var ospans = document.getElementsByTagName("span");
for (var i = 0; i < ospans.length; i++) {
ospans[i].index = i;
ospans[i].onmouseover = function () { this.style.backgroundColor = "black"; }
ospans[i].onmouseout = function () { this.style.backgroundColor = ""; }
ospans[i].onclick = function () {
oimg.src = img_Array[this.index].src;
odiv_txt.innerHTML = img_Array[this.index].text;
clearInterval(timer);
j = this.index>=3?-1:this.index;
timer = setInterval(function () {
auto(j++);
if (j >= 3) { j = -1; }
}, 3000);
}
}
}
function auto(index) {
var oimg = document.getElementById("img1");
var odiv_txt = document.getElementById("div3");
oimg.src = img_Array[index + 1].src;
odiv_txt.innerHTML = img_Array[index + 1].text;
}
</script>
</head>
<body >
<div id="div1">
<img id="img1" alt="" src="" />
</div>
<div id="div2" align="right">
<span> 1 </span>
<span> 2 </span>
<span> 3 </span>
<span> 4 </span> </div>
<div id="div3" align="center">
</div>
</body>
</html>