<!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 >
<!--點(diǎn)-->
<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()
? }
? //自動(dòng)播放
? 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>
