<!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">
#d{
width:614px;
height:650px;
border:#000 solid 1px;}
#dd{
border:#000 solid 1px;
height:650px;
width:110px;
float:left;}
#d1{
border:#000 solid 1px;
width:500px;
height:650px;
float:left;
}
#d2{
width:108px;
height:214px;
text-align:center;
border:#000 solid 1px;
}
#d3{
width:108px;
height:214px;
text-align:center;
border:#000 solid 1px;}
#d4{
width:108px;
height:215px;
text-align:center;
border:#000 solid 1px;}
#d5{
width: 500px;
height: 650px;
}
</style>
<script type="text/javascript">
var list1="aa/4.jpg";
var list2="d2"
var auto=null;
var note=null;
Auto();
function Out(){Auto();}
function Ove(){Out1();clearInterval(auto);}
function Auto(){clearInterval(auto);auto=setInterval('move()',2000);}
function move(){
var change=new Array(new Array('d2','aa/4.jpg'),new Array('d3','aa/1.jpg'),new Array('d4','aa/6.jpg'));
for(var i=0;i<change.length;i++){
if(document.getElementById(change[i][0]).style.backgroundImage!=''){
if(i==change.length-1){
document.getElementById(change[i][0]).style.backgroundImage='';
list1='aa/4.jpg';
list2='d2';
i=0;
document.getElementById(change[i][0]).style.backgroundImage='url(aa/1.jpg)';
document.getElementById('d5').src=change[i][1];
break;
}
document.getElementById(change[i][0]).style.backgroundImage='';
note=document.getElementById(change[i][0]).nextSibling.nextSibling.id;
document.getElementById(note).style.backgroundImage='url(aa/1.jpg)';
document.getElementById('d5').src=change[i+1][1];
list1=change[i+1][1];
list2=change[i+1][0];
break;
}
}
}
function Over(){
document.getElementById("d5").src="aa/4.jpg";
document.getElementById("d2").style.backgroundImage='url(aa/1.jpg)';
document.getElementById("d3").style.backgroundImage='';
document.getElementById("d4").style.backgroundImage='';
list1="aa/4.jpg";
list2='d2'
}
function Over1(){
document.getElementById("d5").src="aa/1.jpg";
document.getElementById("d2").style.backgroundImage='';
document.getElementById("d4").style.backgroundImage='';
document.getElementById("d3").style.backgroundImage='url(aa/1.jpg)';
list1="aa/1.jpg";
list2='d3'
}
function Over2(){
document.getElementById("d5").src="aa/6.jpg";
document.getElementById("d2").style.backgroundImage='';
document.getElementById("d3").style.backgroundImage='';
document.getElementById("d4").style.backgroundImage='url(aa/1.jpg)';
list1="aa/6.jpg";
list2='d4'
}
function Out1(){
document.getElementById("d2").style.backgroundImage='';
document.getElementById("d3").style.backgroundImage='';
document.getElementById("d4").style.backgroundImage='';
document.getElementById("d5").src="";
Over5();
}
function Over5(){
document.getElementById("d5").src=list1;
document.getElementById(list2).style.backgroundImage='url(aa/1.jpg)';
}
</script>
</head>
<body>
<div id="d" onmouseout="Out();" onmouseover="Ove();">
<div id="d1"><img src="aa/4.jpg" id="d5" onmouseover="Out1();"/></div>
<div id="dd" onmouseover="Out1();">
<div id="d2" onmouseover="Over();" onmouseout="Out();" style="background-image:url(aa/1.jpg);">图片1</div>
<div id="d3" onmouseover="Over1();" onmouseout="Out();">图片2</div>
<div id="d4" onmouseover="Over2();" onmouseout="Out();">图片3</div>
</div>
</div>
</body>
</html>
最简单的图片轮播代码（修改版）
1星 需积分: 18 137 浏览量
2012-03-23
09:49:14
上传
评论
收藏 628KB GZ 举报 
changPicture.gz （7个子文件） 
html翻页 aa 
4.jpg 47KB 3.jpg 173KB 6.jpg 44KB 1.jpg 59KB 2.jpg 82KB 5.jpg 238KB
index.html 4KB资源评论
Ariadark2013-06-05资料不全呀 是下载问题吗
