JS 实现动态轮播图

发表于 | 分类于

JavaScript实现轮播图思路 + html/css + js源码

  1. 整个轮播图的效果是通过js代码,操作dom, 拿到html我们需要的元素,控制整个ul的距离浏览器左边的位置,让排好的图片依次出现在相框中,不在相框中的元素会被css中的 overflow : hidden 隐藏掉, 其次,图片是经过处理的 ,正好和我们的相关等宽等高!
  2. 动态的创建元素,下面我们会动态创建li,并通过css把它修饰成小按钮格式,其次给小按钮添加点击事件,鼠标经过,离开事件,动态的实现图片的移动, 其实就是根据不同的参数,移动 ul的left值
  3. 最后添加定时器,在回调函数的位置让他每隔一定的时间就调用一次点击左边按钮的事件
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            border: 0;
        }

        .all {
            width: 500px;
            height: 200px;
            padding: 7px;
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }

        .screen {
            width: 500px;
            height: 200px;
            /*     overflow: hidden;*/
            position: relative;
        }

        .screen li {
            width: 500px;
            height: 200px;
            overflow: hidden;
            float: left;
        }

        .screen ul {
            position: absolute;
            left: 0;
            top: 0px;
            width: 3000px;
        }

        .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: #DB192A;
        }

        #arr {
            display: none;
        }

        #arr span {
            width: 40px;
            height: 40px;
            position: absolute;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background: #000;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-family: '黑体';
            font-size: 30px;
            color: #fff;           opacity: 0.3;
            border: 1px solid #fff;
        }

        #arr #right {
            right: 5px;
            left: auto;
        }
    </style>
</head>
<body>
<div class="all" id='box'>
    <div class="screen"><!--相框-->
        <ul>
            <li><img src="images/1.jpg" width="500" height="200"/></li>
            <li><img src="images/2.jpg" width="500" height="200"/></li>
            <li><img src="images/3.jpg" width="500" height="200"/></li>
            <li><img src="images/4.jpg" width="500" height="200"/></li>
            <li><img src="images/5.jpg" width="500" height="200"/></li>
        </ul>
        
        <ol><!--  ol 里面存放的是按钮, 按钮的个数,就是上面ul子元素的个数-->
        </ol>
    </div>
    <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
</div>
</body>
</html>

上面是html/css搭起来架子,简单说一下

  1. body里面有一个直接子div,我们叫他box,它是整个轮播图的父盒子

1 对box的css相关css样式调整, 给定了宽高,让他把轮播图需要的空间撑起来, 2. 设置了内边距,让他在原有宽高不变的情况下,四周扩展一些,美观 ; 3. 初始情况下,这个盒子贴着浏览器的左上角对齐,我们给他设置外边距, 上下100px ,左右自动, 意思是居中对齐 4. 添加相对定位, 因为box里面的小按钮要脱离文档流,用定位移动到相框指定的位置, 如果不加相对定位, box就限制不住它里面的子元素,

  1. box又有两个直接元素div

box 的第一个直接子元素class=screen , screen的宽高和box一样,里面放着个无序列表,无序列表里面是轮播图的图片, 每一个li,都给定和图片一样大小的宽高,添加浮动,让它们排成一排,给li添加overflow , 属性,防止图片太大了,把多出去的部分切掉,

screen的第二个直接子元素是个ol列表,一会我们要通过js动态的生成和 ul里面的li相同数目的li标签,把他们的样式改成按钮, 需要绝对定位,因此我们设置screen为相对对位

box的第二个直接子元素是一个div叫arr，默认它dispaly:none 隐藏 ,arr里面是轮播图的左右两个箭头，让他相对于box 进行绝对定位

js代码:

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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<script>
    // 获取全部需要的元素
    var box = document.getElementById("box");
    var screen = box.children[0];
    var ulObj = screen.children[0];
    var liList = ulObj.children;
    var olObj = screen.children[1];
    var arr = document.getElementById("arr");
    var width = screen.offsetWidth;  // 相框的宽
    var index = 0;  // 默认小按钮的索引从零开始
    var timeId;

    //  动态的生成和li数量相等的 小按钮
    for (var i = 0; i < liList.length; i++) {
        console.log(i);
        var liObj = document.createElement("li");
        // 添加下标
        liObj.innerHTML = (i + 1);
        // 添加到ol里面
        olObj.appendChild(liObj);
        // 给liObj添加属性,存储下标
        liObj.setAttribute("index", i);

        console.log("index===" + liObj.getAttribute("index"));
        // 给小按钮添加鼠标经过事件
        liObj.onmouseover = function () {

            for (var i = 0; i < olObj.children.length; i++) { // 排他去除所有按钮的 点亮状态
                olObj.children[i].className = "";
            }
            this.className = "current"; // 设置当前的小按钮点亮

            // 移动, 将图片移动到当前小按钮下标的位置
            // 设置 index 的值,为当前小按钮的下标值
            //  index= liObj.getAttribute("index");  不能这样写,因为一打开浏览器,js其实就执行完了, 这个属性,事件都已经存在下来了,
            //  于是我们在这里面只有 通过this,才能定位到当前的 小按钮
            index = this.getAttribute("index");
            console.log(index);
            animate(ulObj, -width * index);
        };

        liObj.onmouseout = function () {
            this.className = "";
        }
    }
    // 默认选中第一按钮
    olObj.children[0].className = "current";
    // 鼠标移动到 box上面 显示那两个按钮
    document.getElementById("box").onmouseover = function () {
        clearInterval(timeId);
        document.getElementById("arr").style.display = "block";
    };

    // 鼠标离开box,干掉 arr 的显示
    document.getElementById("box").onmouseout = function () {
        timeId = setInterval(rightHandler, 1000);
        document.getElementById("arr").style.display = "";
    }

    // 无缝连接需要我们第一个轮播图和最后一份完全相同,于是我们 克隆
    //  var liNode = liList.children[0].cloneNode(true);
    var liNode = ulObj.children[0].cloneNode(true);
    // 添加到 ul 尾部
    ulObj.appendChild(liNode);

    // 给做左边的小按钮绑定点击事件
    document.getElementById("right").onclick = rightHandler;

    function rightHandler() {
        console.log("index===" + index);
        console.log("width===" + width);
        index++;  // 因为第一个index==0 , 所以想移动就得 ++

        console.log("olObj.children.length-1== " + olObj.children.length);

        if (index === olObj.children.length) {  // 这是最后一个
            // index==5 我们要重置
            index = 0;
            // 到第六张图片的时候,我们应该把第五个小按钮的点亮状态给第一个小按钮
            olObj.children[olObj.children.length - 1].className = "";
            olObj.children[0].className = "current";
            // 整排图片一次性全部归位,准备重来
            ulObj.style.left = 0 + "px";
        } else {
            // 1-4 正常移动图片
            animate(ulObj, -width * index);
            for (var i = 0; i < olObj.children.length; i++) {  // 排他干掉所有的 点亮的小按钮
                // console.log("执行了!!!  i== "+i);
                olObj.children[i].className = "";
            }
            // 设置 当前图片对应的小按钮点亮
            olObj.children[index].className = "current";
        }
    }

    // 点击右边的按钮
    document.getElementById("left").onclick = function () {
        // 点击右边的小按钮,整个图片往左动,
        // 点击左边的按钮,整个图片往右动--正数
        console.log("left");
        console.log("index==" + index);

        // 如果是第一个,那么一次性移动到第六张图片,在往右移动
        if (index === 0) {
            index = olObj.children.length;
            ulObj.style.left = -width * index + "px";
        }
        index--;
        console.log("index==" + index);
        animate(ulObj, -width * index);
        // 思考: 为什么我的图片无论往左还是往右移动在 nimate里面都是负数呢?  看上面的最近的if判断,当判断为0
        // 这时我们将图片一次性的移动到了第六张的位置,往右动,远离浏览器 -index*width
        // 我们再次点击 往右移动,就是希望,整个div 离浏览器的左边远一些,是往右动  就是让left  =  -index*width 大一点 ,正好index--了  那么他们的绝对值就会变大
    }

    // 添加自动播放的效果-- 就是隔一段时间调用一次向左移动的函数
    timeId = setInterval(rightHandler, 1000);

    // 鼠标进入暂停--- 给 box 添加鼠标进入事件, 清除定时器

    // 鼠标离开继续动,就是给box 添加鼠标离开事件


    function animate(element, target) {
        clearInterval(element.timeId);
        // element 点 timeId  是给 element 添加了一个属性, 用来存 id , 以后触发定时器,得到的id复写上一个id, 这样 定时器的时间就不会被改变
        element.timeId = window.setInterval(function () {
            // 获取div的位置
            var current = element.offsetLeft;
            // div每次移动的 像素
            var step = 10;
            step = current < target ? step : -step;  // 指明从左向右,还是反向
            // 每次移动后的距离
            current += step;
            if ((Math.abs(target - current)) > Math.abs(step)) {
                // 设置目标位置
                element.style.left = current + "px";
            } else {
                window.clearInterval(element.timeId);
                // if条件不成立.直接到达目标
                element.style.left = target + "px";
            }
        }, 20);
    }


</script>