<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0; padding: 0; list-style: none;}
.banner{
width: 560px;
height: 340px;
background: red;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.banner:hover a{
display: block;
}
.banner a{
display: none;
position: absolute;
top: 50%;
margin-top:-15px;
width: 30px;
height: 30px;
background: rgba(0,0,0,.5);
text-decoration: none;
color: white;
font-weight: bold;
text-align: center;
line-height: 30px;
z-index: 999;
}
.banner a:nth-of-type(1){
border-radius: 0 50% 50% 0;
left: 0;
}
.banner a:nth-of-type(2){
border-radius: 50% 0 0 50%;
right: 0;
}
.banner .list{
position: absolute;
z-index: 999;
left: 50%;
margin-left: -50px;
bottom: 20px;
border-radius: 10px;
width: 100px;
height: 20px;
background: rgba(255,255,255,.3);
}
.banner .list span{
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background: white;
margin-left: 5px;
}
.banner .list .active{
background: #ff5000;
}
.tupian{
width: 500%;
position: absolute;
left: 0;
top: 0;
transition: all 1s;
}
.tupian li{
float: left;
}
.banner .tupian img{
width: 560px;
height: 340px;
}
</style>
</head>
<body>
<div class="banner">
<a href=" "><</a >
<a href="javascript:;">></a >
<!--点-->
<div class="list">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<ul class="tupian">
<li>< img src="img/1.jpg"/></li>
<li>< img src="img/2.jpg"/></li>
<li>< img src="img/3.jpg"/></li>
<li>< img src="img/4.jpg"/></li>
<li>< img src="img/5.jpg"/></li>
</ul>
</div>
<script type="text/javascript">
//先获取元素
var oBox=document.querySelector(".banner");
var oBtn=oBox.querySelectorAll("a");
var oDiv=document.querySelector(".list");
var oSpan=oDiv.querySelectorAll("span");
var oUl=document.querySelector(".tupian");
var oLi=oUl.querySelectorAll("li");
var iNow=0;
var timer=null;
function fnTab(){
for (var j=0;j<oSpan.length;j++) {
oSpan[j].className="";
}
oSpan[iNow].className='active';
oUl.style.left=-560*iNow+"px"
}
//tab切换
for (var i=0;i<oSpan.length;i++) {
oSpan[i].index=i
oSpan[i].onclick=function(){
iNow=this.index;
fnTab()
}
}
//下一张
oBtn[1].onclick=function(){
iNow<oLi.length-1?iNow++:iNow=0;
fnTab()
}
//上一张
oBtn[0].onclick=function(){
iNow==0?iNow=4:iNow--;
fnTab()
}
//自动播放
timer=setInterval(function(){
iNow<oLi.length-1?iNow++:iNow=0;
fnTab()
},1500)
oBox.onmouseover=function(){
clearInterval(timer)
}
oBox.onmouseout=function(){
timer=setInterval(function(){
iNow<oLi.length-1?iNow++:iNow=0;
fnTab()
},1500)
}
</script>
</body>
</html>
