<!DOCTYPE html>
<html>
<head>
<meta charset=
"UTF-8"
>
<title>轮播图</title>
<style>
* {
margin:0;
padding:0;
}
a{
text-decoration: none;
}
.container {
position: relative;
width: 600px;
height: 400px;
margin:100px auto 0 auto;
box-shadow: 0 0 5px green;
overflow: hidden;
}
.container .wrap {
position: absolute;
width: 4200px;
height: 400px;
z-index: 1;
}
.container .wrap img {
float: left;
width: 600px;
height: 400px;
}
.container .buttons {
position: absolute;
right: 5px;
bottom:40px;
width: 150px;
height: 10px;
z-index: 2;
}
.container .buttons span {
margin-left: 5px;
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: green;
text-align: center;
color:white;
cursor: pointer;
}
.container .buttons span.on{
background-color: red;
}
.container .arrow {
position: absolute;
top: 35%;
color: green;
padding:0px 14px;
border-radius: 50%;
font-size: 50px;
z-index: 2;
display: none;
}
.container .arrow_left {
left: 10px;
}
.container .arrow_right {
right: 10px;
}
.container:hover .arrow {
display: block;
}
.container .arrow:hover {
background-color: rgba(0,0,0,0.2);
}
</style>
</head>
<body>
<div class=
"container"
>
<div class=
"wrap"
style=
"left: -600px;"
>
<img src=
"./img/5.jpg"
alt=
""
>
<img src=
"./img/1.jpg"
alt=
""
>
<img src=
"./img/2.jpg"
alt=
""
>
<img src=
"./img/3.jpg"
alt=
""
>
<img src=
"./img/4.jpg"
alt=
""
>
<img src=
"./img/5.jpg"
alt=
""
>
<img src=
"./img/1.jpg"
alt=
""
>
</div>
<div class=
"buttons"
>
<span class=
"on"
>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<a href=
"javascript:;"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
class=
"arrow arrow_left"
><</a>
<a href=
"javascript:;"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
rel=
"external nofollow"
class=
"arrow arrow_right"
>></a>
</div>
<script>
var
wrap = document.querySelector(
".wrap"
);
var
next = document.querySelector(
".arrow_right"
);
var
prev = document.querySelector(
".arrow_left"
);
next.onclick =
function
() {
next_pic();
}
prev.onclick =
function
() {
prev_pic();
}
function
next_pic () {
index++;
if
(index > 4){
index = 0;
}
showCurrentDot();
var
newLeft;
if
(wrap.style.left ===
"-3600px"
){
newLeft = -1200;
}
else
{
newLeft = parseInt(wrap.style.left)-600;
}
wrap.style.left = newLeft +
"px"
;
}
function
prev_pic () {
index--;
if
(index < 0){
index = 4;
}
showCurrentDot();
var
newLeft;
if
(wrap.style.left ===
"0px"
){
newLeft = -2400;
}
else
{
newLeft = parseInt(wrap.style.left)+600;
}
wrap.style.left = newLeft +
"px"
;
}
var
timer =
null
;
function
autoPlay () {
timer = setInterval(
function
() {
next_pic();
},2000);
}
autoPlay();
var
container = document.querySelector(
".container"
);
container.onmouseenter =
function
() {
clearInterval(timer);
}
container.onmouseleave =
function
() {
autoPlay();
}
var
index = 0;
var
dots = document.getElementsByTagName(
"span"
);
function
showCurrentDot () {
for
(
var
i = 0, len = dots.length; i < len; i++){
dots[i].className =
""
;
}
dots[index].className =
"on"
;
}
for
(
var
i = 0, len = dots.length; i < len; i++){
(
function
(i){
dots[i].onclick =
function
() {
var
dis = index - i;
if
(index == 4 && parseInt(wrap.style.left)!==-3000){
dis = dis - 5;
}
//和使用prev和next相同,在最开始的照片5和最终的照片1在使用时会出现问题,导致符号和位数的出错,做相应地处理即可
if
(index == 0 && parseInt(wrap.style.left)!== -600){
dis = 5 + dis;
}
wrap.style.left = (parseInt(wrap.style.left) + dis * 600)+
"px"
;
index = i;
showCurrentDot();
}
})(i);
}
</script>
</body>
</html>