<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.wrap{
width: 510px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.caktye{
width: 9999px;
overflow: hidden;
position: relative;
left: 0;
}
.main{
text-align: center;
position: absolute;
bottom: 10px;
left: 35%; }
.main button{
width: 25px;
height: 25px;
text-align: center;
line-height: 25px;
border-radius: 25px;
display: inline-block;
border: none;
}
.active{
background-color: yellow;
}
.caktye a{
float: left;
}
.caktye img {
display: block;
width:510px;
}
#prevBtn{
display: block;
position: absolute;
left: 5px;
bottom: 45%;
width: 15px;
height: 15px;
border-left: 5px solid ;
border-top: 5px solid ;
border-color: rgba(255,255,255,0.5);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nextBtn{
display: block;
position: absolute;
right: 5px;
bottom: 45%;
width: 15px;
height: 15px;
border-right: 5px solid;
border-top: 5px solid;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border-color: rgba(255,255,255,0.5);
} </style>
</head>
<body> <div class="wrap">
<div class="caktye" id="inner">
<a href="###"><img src="img/1.jpg"></a>
<a href="###"><img src="img/2.jpg"></a>
<a href="###"><img src="img/3.jpg"></a>
<a href="###"><img src="img/4.jpg"></a>
<a href="###"><img src="img/5.jpg"></a>
</div>
<div class="main">
<button class="active">1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
</div>
<div>
<a href="###" id="prevBtn"></a>
<a href="###" id="nextBtn"></a> </div>
</div>
<script type="text/javascript">
var innerList = document.getElementById("inner");
var btnList = document.getElementsByTagName("button");
var perWidth = inner.children[0].offsetWidth;
var prevBtn = document.getElementById("prevBtn");
var nextBtn = document.getElementById("nextBtn"); function tab(){
inner.style.left= -perWidth * index + "px"
for(var j=0;j<btnList.length; j++){
btnList[j].className="";
}
btnList[index].className="active";
}
function next() {
index++;
if(index > btnList.length - 1) {
index = 0;
}
tab();
}
function prev() {
index--;
if(index < 0) {
index = btnList.length - 1;
}
tab();
} for(var i=0;i<btnList.length;i++){
btnList[i].index=i;
btnList[i].onclick =function(){
index=this.index;
tab();
} }
var index=0;
function xunhuan(){
index++; if(index>btnList.length -1){
index=0;
}
tab();
} var timer =setInterval(xunhuan,2000); inner.onmouseover =function(){
clearInterval(timer);
}
inner.onmouseout =function(){
timer = setInterval(xunhuan,2000);
} //下一张
nextBtn.onclick = function() {
clearInterval(timer);
next();
timer = setInterval(next,2000);
} //上一张
prevBtn.onclick = function() {
clearInterval(timer);
prev();
timer = setInterval(next,2000);
}
</script>
</body>
</html>