十分粗糙的回忆一下轮播图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ajax豆瓣电影轮播图</title>
<style type="text/css">
.carousel{
margin: 0 auto;
width: 600px;
height: 300px;
position: relative;
display: block;
}
.carousel img{
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<h1>花瓣电影</h1>
<div class="carousel">
<img style="display: block;"></img>
<img></img>
<img></img>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$.ajax({
type:"get",
url:"https://api.douban.com/v2/movie/in_theaters",
async:true,
dataType:"jsonp",
success:function(data){
for (var i = 0; i < $(".carousel img").length; i++) {
var pics=data.subjects[i].images.large;
// alert(pics);
$(".carousel img").eq(i).attr("src",pics);
}
}
});
var i=0;
go();
function go(){
timer =setInterval(function(){
if(i>2){
i=0;
$(".carousel img").eq(i).show().siblings().hide();
}else{
$(".carousel img").eq(i).show().siblings().hide();
}
i++;
},3000);
}
})
</script>
</body>
</html>