Demo演示
布局
1 | <div class="all" id="all"> |
css样式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.all{
width: 800px;
height: 500px;
border: 1px solid #ccc;
padding: 7px;
margin: 100px auto;
position: relative;
}
.screen{
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.screen ul{
position: absolute;
left: 0;
top: 0;
width: 4000px;
}
.screen li{
width: 800px;
height: 500px;
overflow: hidden;
float: left;
}
细心的朋友可能发现上面我们给 ul设置的宽度是4000,按理说4张宽度800的图片设置为3200就可以了,为什么设置为4000呢?那是因为我们的切换是无缝切换,所以在最后一张切到第一张的时候就需要在后面再补一张第一张的图片。
JS控制
补图片
1 | // 因为我们要做无缝滚动 ,所以要克隆第一张,放到最后一张后面去 |
创建小导航方块
1 | var ol = document.createElement("ol"); // 生成的是ol |
给导航小方块设置样式
1 | .all ol{ |
移动(切换)动画
1 | /* |
定时轮播
1 | var timer = null; // 轮播图的定时器 |
完整的JavaScript处理代码
1 | function animate(obj, target) { |