<!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=gb2312" />
<title>轮播</title>
<style>
#wrap{
margin:0;
position:relative;
height:100vmin;
width:100vw;
background:#33FFCC;
}
#wrapout{
position:absolute;
width:700px;
height:300px;
left:600px;
top:650px;
background:#FFFFFF;
}
#slider{
position:inherit;
width:700px;
height:300px;
}
img{
opacity:0;
position:inherit;
}
#item{
width:690px;
height:30px;
position:inherit;
bottom:0px;
text-align:right;
}
span{
width:30px;
height:15px;
margin:0px;
display:inline-block;
background:#ccc;
}
span:hover{
cursor:pointer;
}
</style>
</head>
<body>
<div id="wrap">
<div id="wrapout">
<div id="slider">
<img src="img/1.png" height="300" width="700" alt="冒险岛" />
<img src="img/2.png" height="300" width="700" alt="冒险岛" />
<img src="img/3.png" height="300" width="700" alt="冒险岛" />
</div>
<div id="item">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<script>
var j = 0;
var timer = null;
onload = handSlide();
slide();
function handSlide(){
var spans = document.getElementsByTagName("span");
var imgs = document.getElementsByTagName("img");
spans[0].onmouseover = function(){
for(var index=0;index<spans.length;index++)
{ spans[index].style.background = "#ccc";
imgs[index].style.opacity = 0; }
spans[0].style.background = "#FFA500";
imgs[0].style.opacity = 1;
}
spans[1].onmouseover = function(){
for(var index=0;index<spans.length;index++)
{ spans[index].style.background = "#ccc";
imgs[index].style.opacity = 0; }
spans[1].style.background = "#FFA500";
imgs[1].style.opacity = 1;
}
spans[2].onmouseover = function(){
for(var index=0;index<spans.length;index++)
{ spans[index].style.background = "#ccc";
imgs[index].style.opacity = 0; }
spans[2].style.background = "#FFA500";
imgs[2].style.opacity = 1;
}
wrapout.onmouseover = function(){ clearInterval(timer); }
wrapout.onmouseout = function(){ timer = setInterval("changeImg()",3000); }
/*for(var num = 0;num<3;num++){
var span = document.getElementsByTagName("span")[num];
span.onmouseover = function(){ span.style.background = "red"; }
span.onmouseout = function(){ span.style.background = "#ccc"; }
}*/
}
function slide(){
changeImg();
timer = setInterval("changeImg()",3000);
}
function changeImg(){
var i,s;
for(var k = 0;k<3;k++){ //清除之前的打开的透明值
i = document.getElementsByTagName("img")[k];
s = document.getElementsByTagName("span")[k];
i.style.opacity = 0;
s.style.background = "#ccc";
}
j %= 3;
i = document.getElementsByTagName("img")[j];
s = document.getElementsByTagName("span")[j];
i.style.opacity = 1;
s.style.background = "#FFA500";
j++;
}
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>轮播</title>
<style>
#wrap{
margin:0;
position:relative;
height:100vmin;
width:100vw;
background:#33FFCC;
}
#wrapout{
position:absolute;
width:700px;
height:300px;
left:600px;
top:650px;
background:#FFFFFF;
}
#slider{
position:inherit;
width:700px;
height:300px;
}
img{
opacity:0;
position:inherit;
}
#item{
width:690px;
height:30px;
position:inherit;
bottom:0px;
text-align:right;
}
span{
width:30px;
height:15px;
margin:0px;
display:inline-block;
background:#ccc;
}
span:hover{
cursor:pointer;
}
</style>
</head>
<body>
<div id="wrap">
<div id="wrapout">
<div id="slider">
<img src="img/1.png" height="300" width="700" alt="冒险岛" />
<img src="img/2.png" height="300" width="700" alt="冒险岛" />
<img src="img/3.png" height="300" width="700" alt="冒险岛" />
</div>
<div id="item">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<script>
var j = 0;
var timer = null;
onload = handSlide();
slide();
function handSlide(){
var spans = document.getElementsByTagName("span");
var imgs = document.getElementsByTagName("img");
spans[0].onmouseover = function(){
for(var index=0;index<spans.length;index++)
{ spans[index].style.background = "#ccc";
imgs[index].style.opacity = 0; }
spans[0].style.background = "#FFA500";
imgs[0].style.opacity = 1;
}
spans[1].onmouseover = function(){
for(var index=0;index<spans.length;index++)
{ spans[index].style.background = "#ccc";
imgs[index].style.opacity = 0; }
spans[1].style.background = "#FFA500";
imgs[1].style.opacity = 1;
}
spans[2].onmouseover = function(){
for(var index=0;index<spans.length;index++)
{ spans[index].style.background = "#ccc";
imgs[index].style.opacity = 0; }
spans[2].style.background = "#FFA500";
imgs[2].style.opacity = 1;
}
wrapout.onmouseover = function(){ clearInterval(timer); }
wrapout.onmouseout = function(){ timer = setInterval("changeImg()",3000); }
/*for(var num = 0;num<3;num++){
var span = document.getElementsByTagName("span")[num];
span.onmouseover = function(){ span.style.background = "red"; }
span.onmouseout = function(){ span.style.background = "#ccc"; }
}*/
}
function slide(){
changeImg();
timer = setInterval("changeImg()",3000);
}
function changeImg(){
var i,s;
for(var k = 0;k<3;k++){ //清除之前的打开的透明值
i = document.getElementsByTagName("img")[k];
s = document.getElementsByTagName("span")[k];
i.style.opacity = 0;
s.style.background = "#ccc";
}
j %= 3;
i = document.getElementsByTagName("img")[j];
s = document.getElementsByTagName("span")[j];
i.style.opacity = 1;
s.style.background = "#FFA500";
j++;
}
</script>
</body>
</html>