<!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>
