JS效果:轮播

基本轮播思路

实现最简单的轮播,我称之为跑火车类型。

火车上的东西是要展现的东西,每一节火车车厢就是轮播一次动画所展现的东西

让火车每次经过展示区域,而且每一节车厢刚好等于展示区域的面积。就可以实现啦。

Html布局

布局上如何实现跑火车呢?根绝上面的图片还是很清晰的:

一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏。通过计算偏移量利用定时器实现自动播放,或通过手动点击事件切换图片。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="container">
<ul class="img">
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
<li><img src="img/4.jpg"></li>
<li><img src="img/5.jpg"></li>
</ul>
<ul class="point"></ul>
<ul class="arrow">
<li class="left"><</li>
<li class="right">></li>
</ul>
</div>

相应的CSS样式

在位置上,就需要存放图片的容器相对展示容器来说绝对定位 (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
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
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 520px;
height: 280px;
margin:100px auto;
position: relative;
box-shadow: 0 0 10px 2px #ccc;
overflow: hidden;
}
ul.img{
width: 1000%;
position: absolute;
top:0;
left:0;
}
ul.img li{
list-style: none;
float: left;
}
ul.point{
position:absolute;
left:50%;
bottom:10px;
margin-left:-75px;
}
ul.point li{
float: left;
margin:0 5px;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
background: pink;
list-style: none;
cursor:pointer;
}
ul.point li.now{
background: red;
color:#fff;
}
.arrow{
position: absolute;
left:0;
width: 100%;
top:50%;
margin-top:-25px;
}
.arrow li{
list-style: none;
width: 35px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 30px;
background: rgba(0,0,0,.2);
cursor: pointer;
}
.left{
float: left;
}
.right{
float: right;
}
</style>

Js实现

根据原理,carousel函数需要获取图片,根据图片来生成小点的个数。具体如下:
要实现无缝轮播,即火车跑完一次的时候,再重来一次会有空白,所以需要复制第一张图片到最后一张弥补这个缺陷,就可以实现无缝轮播了

  • @轮播DIV容器,container
  • @轮播箭头容器,arrowContainer 若无轮播箭头 则传undefined
  • @轮播圆点UL活动样式,pointStyle 若不需要轮播圆点则传undefined
  • @图片自动切换的时间2000ms,time
  • @图片轮播动画的速度20,speed
  • 轮播结构

    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
    function carousel(container, arrowContainer, pointStyle, time, speed) {
    var ul = container.children[0];//图片ul
    var index = 0;//记录图片索引
    var newLi = ul.children[0].cloneNode(true);//在最后一幅图后面添加第一幅图 形成无缝轮播
    ul.appendChild(newLi);
    var liS = ul.children;//所有图片的集合
    ul.style.width = liS.length * 100 + '%';//图片总宽度
    /*判断是否需要圆点*/
    if (pointStyle != undefined) {
    var point = container.children[1];//小圆点ul
    //根据图片数量生成小圆点,初始化轮播圆点状态
    for (var i = 1; i < liS.length; i++) {
    var li = document.createElement('li');
    li.innerHTML = i;
    point.appendChild(li);
    }
    var points = point.children;
    light();
    /*
    * 圆点点击更换图片
    */
    for (var j = 0; j < points.length; j++) {
    points[j].index = j;
    points[j].onclick = function () {
    index = this.index;
    animate(ul, -index * container.offsetWidth, speed);
    light();
    };
    }

    /*
    * 圆点样式改变函数
    */
    function light() {
    for (var i = 0; i < points.length; i++) {
    points[i].className = "";
    }
    index > (points.length - 1) ? points[0].className = pointStyle : points[index].className = pointStyle;
    }
    }

    /*
    * 右键头函数
    */

    function rightPlay() {
    index++;
    if (index > liS.length - 1) {
    ul.style.left = 0;
    index = 1;
    }
    animate(ul, -index * container.offsetWidth, speed);
    pointStyle == undefined ? '' : light();
    }

    /*
    * 左键头函数
    */

    function leftPlay() {
    index--;
    if (index < 0) {
    ul.style.left = -(liS.length - 1) * container.offsetWidth + "px";
    index = liS.length - 2;
    }
    animate(ul, -index * container.offsetWidth, speed);
    light();
    }

    /*判断是否需要左右箭头*/
    if (arrowContainer != undefined) {
    var left = arrowContainer.children[0];//左箭头
    var right = arrowContainer.children[1];//右箭头
    left.onclick = leftPlay;
    right.onclick = rightPlay;
    }



    /*
    * 自动轮播函数
    */
    container.timer = setInterval(rightPlay, time);
    container.onmouseover = function () {
    clearInterval(container.timer);
    };
    container.onmouseout = function () {
    clearInterval(container.timer);
    container.timer = setInterval(rightPlay, time);
    };
    }


    /*
    * @水平动画函数
    * @运动对象,obj
    * @运动目标位置,target
    * @运动速度,speed
    *
    */
    function animate(obj, target, sp) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
    var speeds = (obj.offsetLeft > target ? -sp : sp);
    if (Math.abs(obj.offsetLeft - target) < sp) {
    obj.style.left = target + "px";
    clearInterval(obj.timer);
    } else {
    obj.style.left = obj.offsetLeft + speeds + "px";
    }
    }, 20)

    }

我在说什么

还有个千层饼的轮播,千层饼:利用opcaticy,display,z-index来操作。
顺带提下布局:无非让要展示的东西放在一个盒子里,利用显示和隐藏来实现轮播的效果。

写作还真像耕耘。

文章目录
  1. 1. 基本轮播思路
  2. 2. Html布局
    1. 2.1. 相应的CSS样式
  3. 3. Js实现
  4. 4. 我在说什么
|