<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<head><title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.block{
width:800px;
height:450px;
marign:50px auto;
position:relative;
overflow:hidden;
box-sizing:border-box;
}
.box_big{
position:absolute;
width:4000px;
height:450px;
}
.nav{
transition:margin-left 0.2s linear;
}
.box{
float:left;
width:800px;
height:450px;
}
img{
width:100%;
height:100%;
}
.spot{
position:absolute;
width:100%;
text-align:center;
bottom:5px;
}
.spot_list{
width:30px;
height:30px;
font-size:20px;
display:inline-block;
border:1px solid gray;
border-radius:5px;
line-height:30px;
font-weight:bold;
background:rgba(255,255,255,0.5);
margin:5px;
}
.btn{
width:100%;
height:80px;
position:absolute;
margin:0 auto;
top:160px;
}
.left_btn,.right_btn{
width:30px;
height:80px;
a-index:10;
background:rgba(255,255,255,0.5);
text-align:center;
line-height:80px;
border-radius:8px;
}
.left_btn{
float:left;
}
.right_btn{
float:right;
}
</style>
</head>
<body>
<div class="block">
<div class="box_big">
<div class="box"><img src="images/1.jpg" alt=""/></div>
<div class="box"><img src="images/2.jpg" alt=""/></div>
<div class="box"><img src="images/3.jpg" alt=""/></div>
<div class="box"><img src="images/4.jpg" alt=""/></div>
<div class="box"><img src="images/5.jpg" alt=""/></div>
</div>
<div class="spot">
<div class="spot_list">1</div>
<div class="spot_list">2</div>
<div class="spot_list">3</div>
<div class="spot_list">4</div>
<div class="spot_list">5</div>
</div>
<div class="btn">
<div class="left_btn"><span><</span></div>
<div class="right_btn"><span>></span></div>
</div>
</div>
<script language="javascript">
var box=document.getElementsByClassName('box_big')[0];
var spot=document.getElementsByClassName('spot_list');
var block=document.getElementsByClassName('block')[0];
var left_btn=document.getElementsByClassName('left_btn')[0];
var right_btn=document.getElementsByClassName('right_btn')[0];
var time=null;
var count=0;
function showtime(){
time=setInterval(function(){
mate();
},1000);
}
function mate(){
box.className="box_big nav";
spot[count > box.children.length-1 ? 0 :count].style.background="rgba(255,255,255,0.5)";
count++;
spot[count > box.children.length-1 ? 0 :count].style.background="rgba(91,91,91,0.8)";
box.style.marginLeft=(count * -800)+"px";
setTimeout(function(){
if(count>box.children.length-1){
count=0;
box.className="box_big";
box.style.marginLeft="0px";
}
},1000);
}
block.onmouseenter=function(){
clearInterval(time);
};
block.onmouseleave=function(){
showtime();
};
for(var i=0;i<spot.length;i++){
spot[i].index=i;
spot[i].onmouseenter=function(){
this.style.background="rgba(91,91,91,0.8)";
spot[count > box.children.length-1 ? 0 :count].style.background="rgba(255,255,255,0.5)";
count=this.index;
box.style.marginLeft=(count * -800)+"px";
};
}
left_btn.onclick=function(){
mate();
};
right_btn.onclick=function(){
spot[count > box.children.length-1 ? 0 :count].style.background="rgba(255,255,255,0.5)";
count--;
if(count<0){
box.className="box_big";
count=box.children.length-1;
box.style.marginLeft="-800px";
}
setTimeout(function(){
box.className="box_big nav";
box.style.marginLeft=(-800 * count)+"px";
spot[count].style.backgroundColor="rgba(91,91,91,0.8)";
});
};
</script>
</body>
</html>