轮播
body
{
min-width:900px;}
.datu
{
width:800px;
height:500px;
position:relative;
margin:30px auto;
overflow:hidden;}
#ta
{
margin-left:0px;
transition:0.7s;}
.lr
{
position:absolute;
top:230px;
width:32px;
height:32px;
z-index:99;}
#left
{
left:10px;
}
#right
{
right:10px;
}
#tanchu
{
width:400px;
height:200px;
position:relative;
border:1px solid #333;
background-color:#666;}
#biao
{
width:100%;
height:30px;
background-color:#999;
margin:0px;
position:relative;
font-size:18px;
font-weight:900;}
#zhuyao
{
width:80%;
left:10%;
top:30px;
position:relative;}
</style>
</head>
<body>
<div class="datu" onmouseover="pause()" onmouseout="conti()">
<table id="ta" cellpadding="0" cellspacing="0">
<tr height="500">
<td width="800"><img src="Images/1.jpg" /></td>
<td width="800"><img src="Images/2.jpg" /></td>
<td width="800"><img src="Images/3.jpg" /></td>
<td width="800"><img src="Images/4.jpg" /></td>
<td width="800"><img src="Images/5.jpg" /></td>
</tr>
</table>
<div class="lr" id="left" onclick="dong(-1)">
<img src="Images/left.png" />
</div>
<div class="lr" id="right" onclick="dong(1)">
<img src="Images/right.png" />
</div>
</div>
<div class="datu" style="width:500px; height:50px; background-color:#747474;margin:5px auto;">
<div id="d1" class="datu" style="width:90px; height:50px; background-color:#101010; float:left; position:absolute; left:0px;" onclick="dian(1)"></div>
<div id="d2" class="datu" style="width:90px; height:50px; background-color:#101010; float:left; position:absolute; left:100px;" onclick="dian(2)"></div>
<div id="d3" class="datu" style="width:90px; height:50px; background-color:#101010; float:left; position:absolute; left:200px;" onclick="dian(3)"></div>
<div id="d4" class="datu" style="width:90px; height:50px; background-color:#101010; float:left; position:absolute; left:300px;" onclick="dian(4)"></div>
<div id="d5" class="datu" style="width:90px; height:50px; background-color:#101010; float:left; position:absolute; left:400px;" onclick="dian(5)"></div>
</div>
</body>
</html>
<script>
document.getElementById("ta").style.marginLeft="0px";
function huan()
{
var tu =document.getElementById("ta");
var a=parseInt(tu.style.marginLeft);
if(a<=-3200)
{
tu.style.marginLeft="0px";
}
else
{
tu.style.marginLeft= (a-800)+"px";
}
qie(parseInt(tu.style.marginLeft));
shi =window.setTimeout("huan()",3000);
}
var shi =window.setTimeout("huan()",3000);
function pause()
{
window.clearTimeout(shi);
}
function qie(a)
{
if(a==0)
{
document.getElementById("d1").style.backgroundColor="#000";
document.getElementById("d2").style.backgroundColor="#fff";
document.getElementById("d3").style.backgroundColor="#fff";
document.getElementById("d4").style.backgroundColor="#fff";
document.getElementById("d5").style.backgroundColor="#fff";
}
else if(a==-800){
document.getElementById("d1").style.backgroundColor="#fff";
document.getElementById("d2").style.backgroundColor="#000";
document.getElementById("d3").style.backgroundColor="#fff";
document.getElementById("d4").style.backgroundColor="#fff";
document.getElementById("d5").style.backgroundColor="#fff";
}
else if(a==-1600){
document.getElementById("d1").style.backgroundColor="#fff";
document.getElementById("d2").style.backgroundColor="#fff";
document.getElementById("d3").style.backgroundColor="#000";
document.getElementById("d4").style.backgroundColor="#fff";
document.getElementById("d5").style.backgroundColor="#fff";
}
else if(a==-2400){
document.getElementById("d1").style.backgroundColor="#fff";
document.getElementById("d2").style.backgroundColor="#fff";
document.getElementById("d3").style.backgroundColor="#fff";
document.getElementById("d4").style.backgroundColor="#000";
document.getElementById("d5").style.backgroundColor="#fff";
}
else if(a==-3200){
document.getElementById("d1").style.backgroundColor="#fff";
document.getElementById("d2").style.backgroundColor="#fff";
document.getElementById("d3").style.backgroundColor="#fff";
document.getElementById("d4").style.backgroundColor="#fff";
document.getElementById("d5").style.backgroundColor="#000";
}
}
function dian(n)
{
var tu =document.getElementById("ta");
if(n==1)
{
tu.style.marginLeft="0px";
}
else if(n==2){tu.style.marginLeft="-800px"; }
else if(n==3){tu.style.marginLeft="-1600px"; }
else if(n==4){tu.style.marginLeft="-2400px"; }
else if(n==5){tu.style.marginLeft="-3200px"; }
qie(parseInt(tu.style.marginLeft));
}
function conti()
{
shi = window.setTimeout("huan()",3000);
}
function dong(ad)
{
var tu =document.getElementById("ta");
var a=parseInt(tu.style.marginLeft);
if(ad==-1)
{
if(a==0)
{
tu.style.marginLeft=-3200+"px";
}
else
{
tu.style.marginLeft= (a+800)+"px";
}
}
else
{
if(a==-3200)
{
tu.style.marginLeft=0+"px";
}
else
{
tu.style.marginLeft= (a-800)+"px";
}
}
qie(parseInt(tu.style.marginLeft));
}
</script>
