<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0;
text-decoration: none;
}
body{
padding:20px;
}
#list{
width: 3000px;
height:400px;
z-index: 1;
position: absolute;
animation: myfirst 10s infinite;
}
#list img{
float: left;
}
/* @keyframes myfirst {
0%{transform:translateX(0px)}
25%{transform:translateX(-600px)}
50%{transform:translateX(-1200px)}
75%{transform:translateX(-1800px)}
100%{transform:translateX(-2400px)}
}*/
#container{
margin:0 auto;
width:600px;
height:400px;
border: 3px solid #333333;
overflow: hidden;
position: relative;
}
#buttons{
position: absolute;
height: 10px;
width: 100px;
z-index: 2;
bottom:20px;
left:250px;
border-radius: 50%;
background: #333;
margin-left:5px ;
}
#buttons span{
cursor: pointer;
float: left;
border:1px solid #fff;
width:10px;
height: 10px;
border-radius: 50%;
background-color: #333333;
margin-right:5px;
}
#buttons .on{
background:orangered;
}
.arrow{
cursor: pointer;display: none;line-height: 39px;
text-align:center;
font-size: 36px;
font-weight:bold;
width: 40px;
height:40px;
position: absolute;
z-index:2;
top:180px;
background-color: rgba(0,0,0,.3);color: #ffffff;
}
.arrow:hover{
background-color: rgba(0,0,0,.7);}
#container:hover .arrow{
display: block;
}
#prev{left:20px;}
#next{
right: 30px;}
</style>
<script src="jquery-1.8.3.min.js">
</script>
<script type="text/javascript">
$(function(){
var container = $("#container")
var list = $("#list")
var prev= $("#next")
var next= $("#prev")
var buttons = $("#buttons span")
console.log(prev)
var index = 1
function showbutton(){
buttons.eq(index-1).addClass('on').siblings().removeClass("on")
}
function animate(offset){
var newleft = parseInt(list.css("left"))+offset;
console.log(newleft);
list.css({'left':newleft})
if(newleft>0){
//newleft = -2400
// list.css({'left':newleft})
list.css({'left':-2400+"px"})
}
if(newleft<-2400){
// newleft =0
list.css({'left':0+"px"})
}
}
// next.onclick(function({})
/* next.bind('click',function(){
// console.log("11111")
var newleft = parseInt(list.css("left")) - 600;
console.log(newleft);
list.css({'left':newleft})
if(newleft>0){
//newleft = -2400
// list.css({'left':newleft})
list.css({'left':-2400+"px"})
}
if(newleft<-2400){
// newleft =0
list.css({'left':0+"px"})
}
})*/
next.bind('click',function(){
// console.log("11111")
index +=1;
showbutton();
animate(-600)
})
prev.bind('click',function(){
// console.log("11111")
index -=1;
showbutton();
animate(+600)
})
})
</script>
</head>
<body>
<div id="container">
<div id="list" style="">
<img src="1.jpg" alt="1">
<img src="2.jpg" alt="2">
<img src="3.jpg" alt="3">
<img src="4.jpg" alt="4">
<img src="5.jpg" alt="5">
</div>
<div id="buttons">
<span index="1" class="on"></span>
<span index="2" ></span>
<span index="3" ></span>
<span index="4" ></span>
<span index="5" ></span>
</div>
<a href="javascript:;" id="prev" class="arrow"><</a>
<a href="javascript:;" id="next" class="arrow">></a>
</div>
</body>
</html>
