效果如下：
all code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
overflow: hidden;
}
#box{
width: 375px;
height: 600px;
border: 10px solid #000;
margin: 0 auto;
overflow: hidden;
position: relative;
}
ul{
width: 5000px;
height: 600px;
overflow: hidden;
position: absolute;
}
ul li{
width: 375px;
height: 600px;
float: left;
}
ul li img{
width: 100%;
height: 100%;
}
.left,.right{
width: 30px;
height: 60px;
text-align: center;
font: 30px/2 simsun;
color: white;
background: rgba(0,0,0,.5);
position: absolute;
z-index: 10;
top: 50%;
margin-top: -30px;
}
.left{
left: 10px;
cursor:pointer;
}
.right{
right: 10px;
cursor:pointer;
}
.disc{
position: absolute;
z-index: 10;
bottom: 10px;
left: 0;
right: 0;
height: 40px;
text-align: center;
}
.disc span{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background: gray;
margin: 5px;
}
.disc .active{
background: red;
}
</style>
</head>
<body>
<div id="box">
<ul></ul>
<div class="left"><</div>
<div class="right">></div>
<div class="disc">
</div>
</div>
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
var i = 0;
function getImg(){
$.ajax({
type:"get",
url:"http://gank.io/api/data/%E7%A6%8F%E5%88%A9/10/1",
async:true,
success:function(res){
// console.log(res.results)
var data = res.results;
var html = "";
$.each(data, function(i,val) {
html += '<li><img src="'+ val.url +'" alt="'+ i +'" /></li>';
$(".disc").append("<span/>")
});
html += '<li><img src="'+ data[0].url +'" alt="1" /></li>';
$(".disc span").eq(0).addClass("active");
$("ul").prepend(html);
// console.log(html)
}
});
}
var w = $("#box").width();
function change(){
var length = $("#box li").size();
i++;
if (i == length) {
$('ul').css({left:0});
i = 1;
}
if (i==length-1) {
$(".disc span").eq(0).addClass("active")
.siblings().removeClass("active")
}
$(".disc span").eq(i).addClass("active")
.siblings().removeClass("active");
$('ul').stop().animate({left:-w*i})
}
getImg();
$("#box").on("click",".right",function(){
change();
});
$("#box").on("click",".left",function(){
var length = $("#box li").size();
i--;
console.log(length,i);
if (i == -1) {
i = length-2;
$('ul').css({left:-w*(length-1)})
}
$('ul').stop().animate({left:-w*i});
$(".disc span").eq(i).addClass("active")
.siblings().removeClass("active")
});
$(".disc").on("click","span",function(){
i = $(this).index() -1;
change();
});
var timer = setInterval(change,2000);
$("#box").hover(function(){
clearInterval(timer);
},function(){
timer = setInterval(change,2000);
})
</script>