<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style rel="stylesheet" type="text/css">
*{
padding: 0;
margin: 0;
list-style: none;
}
body{
padding: 20px;
}
.container{
width: 600px;
height: 400px;
overflow: hidden;
position: relative;
border: 3px solid #333;
}
.list{
width: 4200px;
height: 400px;
position: absolute;
z-index: 1;
}
.list img{
float: left;
}
.buttons{
position: absolute;
z-index: 2;
width: 100px;
height: 10px;
bottom: 20px;
left: 250px;
}
.buttons span{
width: 10px;
height: 10px;
border-radius: 50%;
cursor: pointer;
float: left;
border: 1px solid #fff;
margin-right: 5px;
background: #333;
}
.buttons .on{background: orangered;}
.arrow{
text-decoration: none;
color: #fff;
cursor: pointer;
width: 40px;
height: 80px;
line-height: 80px;
text-align: center;
font-size: 36px;
position: absolute;
top: 160px;
background: rgba(0,0,0,.3);
z-index: 2;
display: none;
}
.arrow:hover{
background: rgba(0,0,0,.7);
}
.next{
right: 0px;
}
.container:hover .arrow{display: block}
</style>
</head>
<body>
<div class="container" id="container">
<!--图片列表-->
<div class="list" id="list" style="left: -600px;">
<img src="img/lb%20(5).jpg" alt="">
<img src="img/lb%20(1).jpg" alt="">
<img src="img/lb%20(2).jpg" alt="">
<img src="img/lb%20(3).jpg" alt="">
<img src="img/lb%20(4).jpg" alt="">
<img src="img/lb%20(5).jpg" alt="">
<img src="img/lb%20(1).jpg" alt="">
</div>
<!--按钮列表-->
<div class="buttons" id="buttons">
<span class="on"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<!--左右箭头-->
<a href="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow next">></a>
</div>
</body>
<script type="text/javascript">
function byId(id) {
return typeof (id)==="string"?document.getElementById(id):id;
}
var index=0,
timer,
animated=false,
container=byId("container"),
span=byId("buttons").getElementsByTagName("span"),
len=span.length,
list=byId("list"),
prev=byId("prev"),
next=byId("next");
window.onload=function () {
changeImg();
}
function changeImg() {
//执行 图片切换函数
function animate(offset) {
if(offset==0){
return;
}
animated=true;
var newLeft=parseInt(list.style.left) + offset;//获取移动目标距离
var time=300,
interval=10,
speed=offset/(time/interval);
function go() {
//判断当前速度正负，用来区分向左向右移动，并且判断是否到达目标值，没有则执行移动
if((speed < 0 && parseInt(list.style.left) > newLeft) || (speed > 0 && parseInt(list.style.left) < newLeft)){
list.style.left = parseInt(list.style.left)+speed+'px';
setTimeout(go,interval);
}else {
//如若达到目标值，则直接赋值即可
list.style.left = newLeft+'px';
if(newLeft<-3000){
list.style.left=-600+'px';
}
if(newLeft >-600){
list.style.left=-3000+'px';
}
animated=false;
}
}
go();
}
//显示对应按钮样式
function showButton() {
for(var i=0;i<len;i++){
span[i].className="";
}
span[index].className="on";
}
prev.onclick=function () {
index--;
if (index < 0){
index=4;
}
if(animated){
return;
}
animate(600);
showButton();
}
next.onclick=function () {
index++;
if (index>len-1){
index=0;
}
if(animated){
return;
}
animate(-600);
showButton();
}
//遍历按钮，给每个按钮绑定一个事件
for(var i=0;i<len;i++){
if(animated){
return;
}
span[i].setAttribute("idx",i);
span[i].onclick=function () {
var myIdx=parseInt(this.getAttribute("idx"));//获取点击的索引
var offset=-600*(myIdx-index);//计算点击索引 和 当前索引的距离
index=myIdx;//需要 把点击的索引赋值给index ,记住现有的索引。
animate(offset);
showButton();
}
}
container.onmouseover=function () {
if(timer){
clearInterval(timer);
}
}
container.onmouseout=function () {
timer=setInterval(function () {
next.onclick();
},3000)
}}
</script>
</html>