-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
91 lines (90 loc) · 5.51 KB
/
Copy pathindex.html
File metadata and controls
91 lines (90 loc) · 5.51 KB
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>旋转木马</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css"/>
<link rel="stylesheet" type="text/css" href="css/layout-957f85f036.css"/>
</head>
<body>
<div class="g-carousel-wrap g-carousel-wrap1" data-setting='{"width":0.9,"height":300,"posterWidth":600,"posterHeight":300,"scale":0.9,"speed":500,"autoPlay":true,"delay":5000,"verticalAlign":"top"}'>
<ul class="g-carousel-list">
<li class="g-carousel-item"><img src="imgs/1-1.jpg" width="100%" height="100%" alt="" /></li>
<li class="g-carousel-item"><img src="imgs/1-2.jpg" width="100%" height="100%" alt="" /></li>
<li class="g-carousel-item"><img src="imgs/1-3.jpg" width="100%" height="100%" alt="" /></li>
<li class="g-carousel-item"><img src="imgs/1-4.jpg" width="100%" height="100%" alt="" /></li>
<li class="g-carousel-item"><img src="imgs/1-5.jpg" width="100%" height="100%" alt="" /></li>
<li class="g-carousel-item"><img src="imgs/1-6.jpg" width="100%" height="100%" alt="" /></li>
<li class="g-carousel-item"><img src="imgs/1-7.jpg" width="100%" height="100%" alt="" /></li>
<li class="g-carousel-item"><img src="imgs/1-8.jpg" width="100%" height="100%" alt="" /></li>
<li class="g-carousel-item"><img src="imgs/1-9.jpg" width="100%" height="100%" alt="" /></li>
</ul>
<div class="g-carousel-btnbox">
<button class="g-carousel-btn g-carousel-btn-prev "></button>
<button class="g-carousel-btn g-carousel-btn-next "></button>
</div>
</div>
<div class="g-carousel-wrap" data-setting='{"width":800,"height":600,"posterWidth":300,"posterHeight":420,"scale":0.9,"speed":500,"autoPlay":true,"delay":5000,"verticalAlign":"middle"}'>
<ul class="g-carousel-list">
<li class="g-carousel-item"><img src="imgs/2-1.jpg" width="100%" height="100%" alt="" /></li>
<li class="g-carousel-item"><img src="imgs/2-2.jpg" width="100%" height="100%" alt="" /></li>
<li class="g-carousel-item"><img src="imgs/2-3.jpg" width="100%" height="100%" alt="" /></li>
<li class="g-carousel-item"><img src="imgs/2-4.jpg" width="100%" height="100%" alt="" /></li>
<li class="g-carousel-item"><img src="imgs/2-5.jpg" width="100%" height="100%" alt="" /></li>
<li class="g-carousel-item"><img src="imgs/2-6.jpg" width="100%" height="100%" alt="" /></li>
<li class="g-carousel-item"><img src="imgs/2-7.jpg" width="100%" height="100%" alt="" /></li>
</ul>
<div class="g-carousel-btnbox">
<button class="g-carousel-btn g-carousel-btn-prev "></button>
<button class="g-carousel-btn g-carousel-btn-next "></button>
</div>
</div>
<div class="g-carousel-wrap" data-setting='{"width":1000,"height":400,"posterWidth":658,"posterHeight":400,"scale":0.9,"opacity":0.2,"speed":500,"autoPlay":true,"delay":5000,"verticalAlign":"bottom","btnHover":false}'>
<ul class="g-carousel-list">
<li class="g-carousel-item"><img src="imgs/3-1.jpg" width="100%" height="100%" alt="" /></li>
<li class="g-carousel-item"><img src="imgs/3-2.jpg" width="100%" height="100%" alt="" /></li>
<li class="g-carousel-item"><img src="imgs/3-3.jpg" width="100%" height="100%" alt="" /></li>
<li class="g-carousel-item"><img src="imgs/3-4.jpg" width="100%" height="100%" alt="" /></li>
<li class="g-carousel-item"><img src="imgs/3-5.jpg" width="100%" height="100%" alt="" /></li>
<li class="g-carousel-item"><img src="imgs/3-6.jpg" width="100%" height="100%" alt="" /></li>
</ul>
<div class="g-carousel-btnbox">
<button class="g-carousel-btn g-carousel-btn-prev "></button>
<button class="g-carousel-btn g-carousel-btn-next "></button>
</div>
</div>
<div class="g-carousel-wrap" data-setting='{"width":800,"height":800,"posterWidth":658,"posterHeight":493,"scale":1,"speed":500,"autoPlay":true,"delay":5000,"verticalAlign":"middle","Tile":true}'>
<ul class="g-carousel-list">
<li class="g-carousel-item"><img src="imgs/4-1.jpg" width="100%" height="100%" alt="" /></li>
<li class="g-carousel-item"><img src="imgs/4-2.jpg" width="100%" height="100%" alt="" /></li>
<li class="g-carousel-item"><img src="imgs/4-3.jpg" width="100%" height="100%" alt="" /></li>
<li class="g-carousel-item"><img src="imgs/4-4.jpg" width="100%" height="100%" alt="" /></li>
<li class="g-carousel-item"><img src="imgs/4-5.jpg" width="100%" height="100%" alt="" /></li>
</ul>
<div class="g-carousel-btnbox">
<button class="g-carousel-btn g-carousel-btn-prev "></button>
<button class="g-carousel-btn g-carousel-btn-next "></button>
</div>
</div>
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/main-ee43f4e073.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
xplCarousel.init(".g-carousel-wrap");
/*
* 参数说明 放置在每个轮播g-carousel-wrap所在标签的data-setting属性里格式是json格式
{
"width": 1000, //幻灯片的宽度 可以是百分比（0-1）
"height": 270, //幻灯片的高度
"posterWidth": 640, //幻灯片第一张图片的宽度
"posterHeight": 270, //幻灯片第一张图片的高度
"scale": 0.9, //记录显示比例关系
"speed": 500,//图片切换速度
"autoPlay": true,//是否自动播放
"delay": 5000,//图片自动播放间隔时间
"verticalAlign": "middle" //top bottom图片对齐
"btnHover": false //控制按钮是否通过hover要显示
"Tile":false //是否平铺,ture的话最外围的宽度会跟图片宽度一致
}*/
</script>
</body>
</html>