首页 > 代码库 > 图片点击轮播（四）高级--2017-04-05
图片点击轮播（四）高级--2017-04-05
点击下方图片轮播：
关键点：onmouseover ，onmouseout两个事件；DOM；
<style>
#datu
{
width:400px;
height:300px;
position:relative;
margin:20px auto;
overflow:hidden;
}
#ta
{
position:relative;
left:0px;
top:0px;
transition:0.7s;}
#suo
{
width:300px;
height:30px;
position:relative;
margin:20px auto;
border:0px solid blue;
line-height:30px;}
.suo
{
width:30px;
height:30px;
position:relative;
border:1px solid yellow;
float:left;
margin-left:10px;
margin-top:10px;}
</style>
</head>
<body>
<div id="datu" onm ouseover="Zhi()" onm ouseout="Li()" >
<table id="ta" cellpadding="0" cellspacing="0">
<tr height="300">
<td><img src="http://www.mamicode.com/turn-pic/a.jpg" width="400" height="300"/></td>
<td><img src="http://www.mamicode.com/turn-pic/b.jpg" width="400" height="300" /></td>
<td><img src="http://www.mamicode.com/turn-pic/c.jpg" width="400" height="300" /></td>
<td><img src="http://www.mamicode.com/turn-pic/d.jpg" width="400" height="300"/></td>
<td><img src="http://www.mamicode.com/turn-pic/e.jpg" width="400" height="300"/></td>
</tr>
</table>
</div>
<div id="suo" onm ouseover="Zhi()" onm ouseout="Li()">
<div class="suo" biao="1"><img src="http://www.mamicode.com/turn-pic/a.jpg" width="30" height="30" /></div>
<div class="suo" biao="2"><img src="http://www.mamicode.com/turn-pic/b.jpg" width="30" height="30" /></div>
<div class="suo" biao="3"><img src="http://www.mamicode.com/turn-pic/c.jpg" width="30" height="30" /></div>
<div class="suo" biao="4"><img src="http://www.mamicode.com/turn-pic/d.jpg" width="30" height="30" /></div>
<div class="suo" biao="5"><img src="http://www.mamicode.com/turn-pic/e.jpg" width="30" height="30" /></div>
</div>
</body>
</html>
<script>
document.getElementById("ta").style.left="0px";
document.getElementsByClassName("suo").item(0).style.borderColor="red";
var biaosuo=1;
var suo=document.getElementsByClassName("suo");
for(var i=0;i<suo.length;i++)
{
suo.item(i).onclick=function(){
var biao = this.getAttribute("biao");
for(var i = 0;i<5;i++)
{
if(i==biao-1)
{
document.getElementsByClassName("suo").item(i).style.borderColor="red";
}
else
{
document.getElementsByClassName("suo").item(i).style.borderColor="yellow";
}
if(biao==1)
{
document.getElementById("ta").style.left="0px";
}
else if(biao==2)
{
document.getElementById("ta").style.left="-400px";
}
else if(biao==3)
{
document.getElementById("ta").style.left="-800px";
}
else if(biao==4)
{
document.getElementById("ta").style.left="-1200px";
}
else
{
document.getElementById("ta").style.left="-1600px";
}
}
}
}
function Change()
{
var ta = parseInt(document.getElementById("ta").style.left);
if(ta>-1600)
{
document.getElementById("ta").style.left=(ta-400)+"px";
ta=ta-400;
if(ta==-400)
{
biaosuo=2;
}
else if(ta==-800)
{
biaosuo=3;
}
else if(ta==-1200)
{
biaosuo=4;
}
else if(ta=-1600)
{
biaosuo=5;
}
}
else
{
document.getElementById("ta").style.left="0px";
biaosuo=1;
}
for(var i = 0;i<5;i++)//offsetLeft
{
if(i==biaosuo-1)
{
document.getElementsByClassName("suo").item(i).style.borderColor="red";
}
else
{
document.getElementsByClassName("suo").item(i).style.borderColor="yellow";
}
}
shi=window.setTimeout("Change()",3000);
}
var shi =window.setTimeout("Change()",3000);
function Zhi()
{
window.clearTimeout(shi);
}
function Li()
{
shi=window.setTimeout("Change()",1000);
}
</script>
图片点击轮播（四）高级--2017-04-05