<!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>
<a href=
"###"
><img src=
"img/1.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"
);
var
timer = 0;
var
timer1 = 0;
var
index =0;
var
runFlag = true;
for
(
var
i = 0; i < btnList.length; i++) {
btnList[i].index = i;
btnList[i].onclick =
function
() {
index = this.index;
tab();
}
}
function
tab() {
var
start = inner.offsetLeft;
var
end
= - perWidth * index;
var
change =
end
- start;
var
t = 0;
var
maxT = 30;
clearInterval(timer1);
timer1 = setInterval(
function
() {
t++;
if
(t >= maxT) {
clearInterval(timer1);
runFlag = true;
}
inner.style.left = change/maxT * t + start +
"px"
;
if
(index == btnList.length && t >= maxT) {
inner.style.left = 0;
}
},30)
for
(
var
j = 0; j < btnList.length; j++) {
btnList[j].className =
""
;
}
if
(index >= btnList.length) {
btnList[0].className =
"active"
;
}
else
{
btnList[index].className =
"active"
;
}
}
function
xunhuan(){
index++;
if
(index>btnList.length){
index=1;
}
tab();
}
var
timer =setInterval(xunhuan,5000);
inner.onmouseover =
function
(){
clearInterval(timer);
}
inner.onmouseout =
function
(){
timer = setInterval(xunhuan,5000);
}
function
next() {
index++;
if
(index > btnList.length) {
index = 1;
}
tab();
}
function
prev() {
index--;
if
(index < 0 ) {
index = btnList.length - 1;
inner.style.left = - btnList.length * perWidth +
"px"
;
console.log(index);
}
tab();
}
nextBtn.onclick =
function
() {
clearInterval(timer);
if
(runFlag) {
next();
}
runFlag = false;
}
prevBtn.onclick =
function
() {
clearInterval(timer);
if
(runFlag) {
prev();
}
runFlag = false;
}
</script>
</body>
</html>