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

 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>

 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;
}

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);  // 开始轮播图定时器
}

 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);  // 开始轮播图定时器
    }
}