Web前端基础（13）JS实践案例--自动轮播图片

发表于 | 分类于 ， | 评论数：

Demo演示

布局

1
2
3
4
5
6
7
8
9
10
<div class="all" id="all">
    <div class="screen">
        <ul id="ul">
            <li><img src="images/banner1.png" alt="" width="800" height="500"></li>
            <li><img src="images/banner2.png" alt="" width="800" height="500"></li>
            <li><img src="images/banner3.png" alt="" width="800" height="500"></li>
            <li><img src="images/banner4.png" alt="" width="800" height="500"></li>
        </ul>
    </div>
</div>

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
2
// 因为我们要做无缝滚动  ，所以要克隆第一张，放到最后一张后面去
ul.appendChild(ul.children[0].cloneNode(true));

创建小导航方块

1
2
3
4
5
6
7
8
var ol = document.createElement("ol");  // 生成的是ol
box.appendChild(ol); // 把ol 追加到  box 里面
for (var i = 0; i < ulLis.length - 1; i++) {
    var li = document.createElement("li");
    li.innerHTML = i + 1;  //  给里面小的li 文字  1 2 3 4 5
    ol.appendChild(li);  // 添加到 ol 里面
}
ol.children[0].className = "current";

给导航小方块设置样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.all ol{ 
    position:absolute; 
    right:10px; 
    bottom:10px; 
    line-height:20px; 
    text-align:center;
}
.all ol li{ 
    float:left;
    width:20px; 
    height:20px; 
    background:#fff;
    border:1px solid #ccc; 
    margin-left:10px; 
    cursor:pointer;
    }
.all ol li.current{ 
    background:yellow;
}

移动（切换）动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*
*第一个参数是ul对象
*第二个参数是应该移动的距离（800的整数倍）
*/
function animate(obj, target) {
    clearInterval(obj.timer);  // 先清除定时器
    var speed = obj.offsetLeft < target ? 15 : -15;  // 用来判断 应该 +  还是 -
    obj.timer = setInterval(function () {
    	//每次移动15px所以移动的次数是 800 / 5 = 53余下5; 
        var result = target - obj.offsetLeft;  //每次判断是否差值缩小到5以内了
        obj.style.left = obj.offsetLeft + speed + "px";
        if (Math.abs(result) <= 15)  // 如果差值不小于 5 说明到位置了
        {
            clearInterval(obj.timer);
            obj.style.left = target + "px";  // 有5像素差距   我们直接跳转目标位置
        }
    }, 10)
}

定时轮播

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
var timer = null;   // 轮播图的定时器
var key = 0;  //控制播放张数
var square = 0; // 控制小方块
timer = setInterval(autoplay, 1000);  // 开始轮播图定时器
function autoplay() {
    key++;  // 先 ++
    if (key > ulLis.length - 1)  // 后判断
    {
        ul.style.left = 0;  // 迅速调回
        key = 1;  // 因为第6张就是第一张  第6张播放 下次播放第2张
    }
    animate(ul, -key * 800);  // 再执行
    // 小方块
    square++;
    if (square > olLis.length - 1) {
        square = 0;
    }
    for (var i = 0; i < olLis.length; i++)   // 先清除所有的
    {
        olLis[i].className = "";
    }
    olLis[square].className = "current";  // 留下当前的
}
//last最后  鼠标经过大盒子要停止定时器
box.onmouseover = function () {
    clearInterval(timer);
}
box.onmouseout = function () {
    timer = setInterval(autoplay, 1000);  // 开始轮播图定时器
}

完整的JavaScript处理代码

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
function animate(obj, target) {
    clearInterval(obj.timer);  // 先清除定时器
    var speed = obj.offsetLeft < target ? 15 : -15;  // 用来判断 应该 +  还是 -
    obj.timer = setInterval(function () {
        var result = target - obj.offsetLeft; // 因为他们的差值不会超过5
        obj.style.left = obj.offsetLeft + speed + "px";
        if (Math.abs(result) <= 15)  // 如果差值不小于 5 说明到位置了
        {
            clearInterval(obj.timer);
            obj.style.left = target + "px";  // 有5像素差距   我们直接跳转目标位置
        }
    }, 10)
}
window.onload = function () {
    // 获取元素
    var box = document.getElementById("all");  // 大盒子
    var ul = document.getElementById("ul");
    var ulLis = ul.children;

    // 操作元素

// 因为我们要做无缝滚动  ，所以要克隆第一张，放到最后一张后面去
// a.appendchild(b)   把 b 放到 a 的最后面
// 1. 克隆完毕
ul.appendChild(ul.children[0].cloneNode(true));

    // 2. 创建 ol  和  小 li
    console.log(ulLis.length);
    var ol = document.createElement("ol");  // 生成的是ol
    box.appendChild(ol); // 把ol 追加到  box 里面
    for (var i = 0; i < ulLis.length - 1; i++) {
        var li = document.createElement("li");
        li.innerHTML = i + 1;  //  给里面小的li 文字  1 2 3 4 5
        ol.appendChild(li);  // 添加到 ol 里面
    }
    ol.children[0].className = "current";

    //3. 开始动画部分
    var olLis = ol.children;
    for (var i = 0; i < olLis.length; i++) {
        olLis[i].index = i;  // 获得当前第几个小li 的索引号
        olLis[i].onmouseover = function () {
            for (var j = 0; j < olLis.length; j++) {
                olLis[j].className = "";  // 所有的都要清空
            }
            this.className = "current";
            animate(ul, -this.index * 800)
            // 调用动画函数  第一个参数  谁动画     第二个  走多少
            square = key = this.index;  // 当前的索引号为主
        }
    }
    //  4. 添加定时器
    var timer = null;   // 轮播图的定时器
    var key = 0;  //控制播放张数
    var square = 0; // 控制小方块
    timer = setInterval(autoplay, 1000);  // 开始轮播图定时器
    function autoplay() {
        key++;  // 先 ++
        if (key > ulLis.length - 1)  // 后判断
        {
            ul.style.left = 0;  // 迅速调回
            key = 1;  // 因为第6张就是第一张  第6张播放 下次播放第2张
        }
        animate(ul, -key * 800);  // 再执行
        // 小方块
        square++;
        if (square > olLis.length - 1) {
            square = 0;
        }
        for (var i = 0; i < olLis.length; i++)   // 先清除所有的
        {
            olLis[i].className = "";
        }
        olLis[square].className = "current";  // 留下当前的
    }
    //last最后  鼠标经过大盒子要停止定时器
    box.onmouseover = function () {
        clearInterval(timer);
    }
    box.onmouseout = function () {
        timer = setInterval(autoplay, 1000);  // 开始轮播图定时器
    }
}