JS 原生轮播图

轮播图步骤解析 注意看注释

第一步 :

写出轮播图基本样式 : 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="box"> // 这里的盒子是包含所有的一个大盒子
       <div class="screen"> // 这里是包含图片的盒子 也可称为可视窗口
           <ul>
           	//  这里 的图片样式可写在外面 这里为了方便
               <li><img src="图片路径" width="图片宽度" height="图片高度" /></li>
               <li><img src="图片路径" width="图片宽度" height="图片高度" /></li>
               <li><img src="图片路径" width="图片宽度" height="图片高度" /></li>
               <li><img src="图片路径" width="图片宽度" height="图片高度" /></li>
               <li><img src="图片路径" width="图片宽度" height="图片高度" /></li>
           </ul>
           <ol>
			// 这里面存放的是动态创建的 li 标签 也就是点击按钮
           </ol>
       </div>
       <div class="arr">
           <span class="left">&lt;</span> //   左箭头
           <span class="right">&gt;</span> //  右箭头
       </div>
   </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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
* {
    padding: 0;
    margin: 0;
    list-style: none;
    border: 0;
}

.box {
    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;
}

.box ol {
    position: absolute;
    right: 10px;
    bottom: 10px;
    line-height: 20px;
    text-align: center;
}

.box ol li {
    float: left;
    width: 20px;
    height: 20px;
    background: #fff;
    border: 1px solid #ccc;
    margin-left: 10px;
    cursor: pointer;
}

.box ol li.current {
    background: rgb(113, 226, 211);
}

.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-size: 30px;
    color: #fff;
    opacity: 0.3;
    border: 1px solid #fff;
}

.arr .right {
    right: 5px;
    left: auto;
}

1530776017081

出来的大概样式就是如此了 我把 这里的overflow:hidden注释掉可以看得更直观一些

1
2
3
4
5
6
.screen {
    width: 500px;
    height: 200px;
    /* overflow: hidden; */
    position: relative;
}

!! 将所需要的元素从页面中提取出来

1
2
3
4
5
6
7
8
9
10
11
12
 var box = document.getElementById('box'); //拿到最大的盒子
 var screenBox = box.children[0]; //   拿到大盒子下面的子盒子  也就是显示图片的那个盒子
 var ul = screenBox.children[0]; //  拿到 ul 列表.
 var lisUl = ul.children; // 拿到 ul 标签内的所有存放图片的 li
 var ol = screenBox.children[1]; //   拿到 ol 存放 小方块的 盒子
 var lisOl = ol.children;
 var arrBox = box.children[1]; //  拿到左右箭头的盒子
 var arrBox_left = arrBox.children[0]; //  拿到 左箭头
 var arrBox_right = arrBox.children[1]; // 拿到右箭头
 var imgWidth = screenBox.offsetWidth;
 var count = 0; //    这里定义一个变量 来记录图片的移出张数
这里我将所有一系列需要的全部进行获取

上面的样式已近操作完成 接下来分析步骤

  • 首先根据图片的个数创建出动态的ol li标签 这样在修改的时候回更为方便

  • 接下来 给 ol 下的第一个li 添加颜色

  • 第三步 给下面的数字设置点击事件
  • 第四步 设置大盒子的鼠标移入 移除事件 此处涉及到冒泡 下面会提及冒泡原由
  • 第五步 克隆第一张 追加到最后一张的后面 也就是所谓的无缝连接
  • 第六步 设置右按钮的点击事件
  • 第七步 设置左按钮的点击事件
  • 第八步 设置定时器 及相关一些列操作

好 ,来操作第一步,动态创建 ol 下的 li标签

1
2
3
4
5
for(var i = 0 ; i < lisUl.length ;i++ ) {
    var li = document.createElement('li');
    li.innerHTML = i +1;  // 往创建好的li标签内添加数字,当然这一步也可以省略 也可以没有数字
    ol.appendChild(li);   // 将创建好的li标签放入ol列表中
} // 这里需要结合css样式来看

操作第二部

1
lisOl[0].classname = 'current';  //去看css样式

第三部操作

1
2
3
4
5
6
7
8
9
10
11
12
for(var i = 0 ; i < lisOl.length;i++ ){  // 将获取到的ol下的li标签进行循环添加点击事件
    lisOl[i].index = i;  // 记录每一个 i 的索引 当然你也可以打印出来 console.log();
    lisOl[i].onclick = function () {
        for(var i = 0 ; i < lisOl.length ;i++) {  // 由于作用域不一样 这里仍然可以使用 i
            lisOl[i].className = ''; 
        }
        this.className = 'current'; // 接下来这一步的依据是很重要的 调用一个 运动函数
        move(ul,-this.index * imgWidth);
        count = this.index; 
        console.log(count); // 当你点击小方块的时候会将小方块的索引打印出来
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
运动函数 : 由于复杂 不需要会写 需要的时候直接拿出来用就可以
function move(element, target) {
            clearInterval(element.timer); //清除旧的定时器，保证匀速运动，防止加速效果
            element.timer = setInterval(function() {
                //1 获取元素当前位置 使用offsetLeft属性
                var current = element.offsetLeft;
                //2 设置步长
                var step = 17;
                //根据当前位置和目标位置的大小关系进行判断
                step = target > current ? step : -step;
                //5 运动条件设置
     //检测当前位置和目标位置之间的距离，如果满足一个step的距离，可以运动，否则直接运动到目标位置，结束
                if (Math.abs(target - current) > Math.abs(step)) {
                    //3 设置运动公式:元素位置(新) = 元素位置(旧) + 步长;
                    current = current + step;
                    //4 设置给元素的left值运动
                    element.style.left = 0 + "px";
                } else {
                    //6 让element直接运动到目标位置，再清除定时器
                    element.style.left = target + "px";
                    clearInterval(element.timer);
                }
            }, 20);
        }

第四步

1
2
3
4
5
6
7
box.onmouseover = function() {
     arrBox.style.display = 'block'; // 设置它的显示属性
  }
box.onmouseout = function() {
     arrBox.style.display = 'none'; // 设置它的影藏属性
  }
  鼠标的移入移出的事件有两种 这一种会触发事件冒泡  当然你也可以试一试

第五步

1
2
3
// 这里涉及到无缝连接
var pic = lisUl[0].clondNode(true);
ul.appendChild(pic);

第六步 右按钮的点击事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
arrBox_right.onclick = function () {
    if(count == lisUl.length - 1 ){  // 个人习惯如果只判断值是否相等就可以 count记录了图片的索引
        ul.style.left = 0 + 'px';  //  将运动的ul的位置固定到最开始的位置 其始位置
        count = 0;
    } 
    count++; // 上面将他改为0 这里需要从新让他依次递加
    move(ul,-count * imgWidth);
    // 还需要操作对应的小方块的颜色进行改变
    for(var i = 0 ; i < lisOl.length ;i++) {
        lisOl[i].className = '';
    }
    if(count == lisOl.length -1 ){ // 这里的判断条件不进行详解,应该能看懂
        lisOl[0].className = 'current'; 
    }else{
        lisOl[count].className = 'current'; 
    }
}

第七步 左按钮的点击事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
arrBox_left.onclick = function() {
      if (count === 0) { //  如果 移出的图片为0 的时候 得抽回到 假的那张图片的位置
            ul.style.left = -(lisUl.length - 1) * imgWidth + 'px';
            count = lisUl.length - 1;
        }
        count--;
        move(ul, -count * imgWidth);
        for (var i = 0; i < lisOl.length; i++) {
            lisOl[i].className = '';
        }
        if (count === lisUl.length - 1) {
            lisOl[0].className = 'current';
        } else {
            lisOl[count].className = 'current';
        }
       }
   这里的左按钮点击事件和右按钮的操作相同 , 没有太大出入

第八步 进行定时器 自动轮播

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var timer = null; // 定义一个时间变量
       timer = setInterval(function() {
           arrBox_right.onclick();
       }, 1000);   //  每个一秒 调用一次右按钮的点击事件

       box.onmouseover = function() {  // 当鼠标移入大盒子的时候 将 按钮箭头显示出来 同时停止 定时器
           arrBox.style.display = 'block';
           clearInterval(timer);
       };

       box.onmouseout = function() {// 当鼠标移入大盒子的时候 将 按钮箭头影藏起来 同时启动定时器
           arrBox.style.display = 'none';
           timer = setInterval(function() {   // 将上面的定时器直接拿过来就可以了 
               arrBox_right.onclick();
           }, 1000);
       }

好了,轮播图就结束了, 不知道你有没有看懂,是挺麻烦的,接下来我会出一个 jQuery的轮播图 相对而言会简单许多

本文标题:JS 原生轮播图

文章作者:李大玄

发布时间:2018-07-05, 15:14:53

最后更新:2018-07-06, 01:23:52

原始链接:http://yoursite.com/2018/07/05/JS原生轮播图/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

文章目录
  1. 1. 轮播图步骤解析 注意看注释
    1. 1.0.0.1. 第一步 :
    2. 1.0.0.2. 第二步 :
  2. 1.0.1. 上面的样式已近操作完成 接下来分析步骤
    1. 1.0.1.1. 好 ,来操作第一步,动态创建 ol 下的 li标签
    2. 1.0.1.2. 操作第二部
    3. 1.0.1.3. 第三部操作
    4. 1.0.1.4. 第四步
    5. 1.0.1.5. 第五步
    6. 1.0.1.6. 第六步 右按钮的点击事件
    7. 1.0.1.7. 第七步 左按钮的点击事件
    8. 1.0.1.8. 第八步 进行定时器 自动轮播
  • 1.1. 好了,轮播图就结束了, 不知道你有没有看懂,是挺麻烦的,接下来我会出一个 jQuery的轮播图 相对而言会简单许多
    • |