-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathslider_demo.html
117 lines (111 loc) · 4.11 KB
/
slider_demo.html
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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>example</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style type="text/css">
#demo {
position: relative;
width: 820px;
height: 550px;
overflow: hidden;
}
#demoimg {
position: absolute;
padding: 0; /*pading和margin的属性很重要, 否则图片边缘会有空隙*/
margin: 0;
width: 4100px;
height: 550px;
left: 0;
}
li {
list-style: none;
padding: 0;
float: left;
}
</style>
</head>
<body>
<div id="demo">
<ul id="demoimg">
<li>
<img src="image/carousel-pic/01.jpg" />
</li>
<li>
<img src="image/carousel-pic/02.jpg" />
</li>
<li>
<img src="image/carousel-pic/03.jpg" />
</li>
<li>
<img src="image/carousel-pic/04.jpg" />
</li>
<li>
<img src="image/carousel-pic/05.jpg" />
</li>
</ul>
</div>
<div id="myCarousel" class="carousel slide">
<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="image/carousel-pic/01.jpg" style="width: 100%;" alt="First slide">
</div>
<div class="item">
<img src="image/carousel-pic/02.jpg" style="width: 100%;" alt="Second slide">
</div>
<div class="item">
<img src="image/carousel-pic/03.jpg" style="width: 100%;" alt="Third slide">
</div>
<div class="item">
<img src="image/carousel-pic/04.jpg" style="width: 100%;" alt="Four slide">
</div>
<div class="item">
<img src="image/carousel-pic/05.jpg" style="width: 100%;" alt="Five slide">
</div>
</div>
<!-- 轮播（Carousel）导航 -->
<a class="carousel-control left" href="#myCarousel"
data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel"
data-slide="next">›</a>
</div>
<br />
<img src="image/header/countryside-03.jpg" alt="乡村风光" class="img-responsive center-block" id="header-pic"/>
<script type="text/javascript">
// 幻灯片效果实现, 假设有n张图片, 则需要切换n-1次, 并且每次将整个图片合集的最左边向左移动单位图片的宽度, 以此来切换到下一张图片
// 在n-1次切换完毕后, 然后将图片合集的最左侧位置再次设置为0
// if判断语句通过判断每一次的图片合集最左侧的位置是否已经达到单张图片的宽度乘以总图片张数减去1
//初始化从0开始, 因此本程序是依次0, 1, 2, 3， 选择语句执行结束对应1, 2, 3, 4, 在第5次正好再次返回第一张图片
function sliderOneTime(){
var demoimg = document.getElementById("demoimg");
var imgList = demoimg.getElementsByTagName("li");
var imgsLeft = demoimg.offsetLeft;
var imgWidth = imgList[0].offsetWidth;
var imgsLength = imgList.length;
if (imgsLeft > -imgWidth * (imgsLength - 1)) {
// console.log(imgsLeft);
imgsLeft -= imgWidth;
demoimg.style.left = imgsLeft + "px";
} else {
imgsLeft = 0;
demoimg.style.left = "0px";
}
// console.log(imgsLeft);
}
setInterval(sliderOneTime, 1000);
</script>
</body>
</html>