轮播图

若如初见. 提交于 2020-12-05 19:55:51

今天学到轮播图以前看似很简单,今天一做对于我这新手还是挺难,主要还是逻辑思维。

现在就对自己做的轮播图在整体的一步一步的写一下:

HTML+css代码如下

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            .a1 {
                width: 500px;
                height: 200px;
                border: 1px solid red;
                margin: 0 auto;
                position: relative;
                overflow: hidden;
            }
            
            li {
                float: left;
                display: inline-block;
            }
            
            .a2 {
                position: relative;
                width: 500px;
                height: 200px;
            }
            
            ul {
                position: absolute;
                top: 0;
                left: 0;
                width: 3000px;
                margin: 0;
                padding: 0;
                list-style: none;
            }
            
            img {
                display: inline;
                width: 500px;
                height: 200px;
            }
            
            .a3 {
                height: 50px;
                position: absolute;
                display: block;
                width: 500px;
                top: 75px;
                display: none;
                cursor: pointer;
                color: white;
            }
            
            .a3 #left {
                text-align: center;
                position: absolute;
                left: 0;
                background-color: blue;
                font-size: 50px;
                opacity:0.3;
            }
            
            .a3 #right {
                text-align: center;
                position: absolute;
                margin-left: 460px;
                background-color: blue;
                font-size: 50px;
                opacity:0.3;
            }
            
            ol li {
                width: 20px;
                text-align: center;
                margin-left: 5px;
                background-color: white;
                color: black;
                cursor: pointer;
            }
            
            ol {
                position: absolute;
                top: 180px;
            }
            
            .a5 {
                background-color: yellow;
            }
        </style>
    </head>

    <body>
        <div id="a1" class="a1">
            <div id="a2" class="a2">
                <ul>
                    <li><img src="img/轮播图1.jpg" /></li>
                    <li><img src="img/轮播图2.jpg" /></li>
                    <li><img src="img/轮播图3.jpg" /></li>
                </ul>
                <ol>

                </ol>
            </div>
            <div class="a3">
                <span id="left">&lt;</span>
                <span id="right">&gt;</span>
            </div>
        </div>
</body>
</html>

解决兼容性js代码如下:

  1 <script src="js/common.js">
  2 //获取ID
  3 function dgb(id) {
  4     return document.getElementById(id);
  5 }
  6 
  7 // 解决firstElementChild的兼容性问题,获取第一个子元素
  8 function getfirstElementChild(parent) {
  9     if(parent.firstElementChild) {
 10         return parent.firstElementChild;
 11     }
 12     var node, nodes = parent.childNodes,
 13         i = 0;
 14     while(node = nodes[i++]) {
 15         if(node.nodeType === 1) {
 16             return node
 17         }
 18     }
 19     return null;
 20 }
 21 
 22 //解决innertext兼容性问题 给 "element"元素 设置 "cotent"内容
 23 function setInnerText(element, cotent) {
 24     if(typeof element.innerText === 'string') {
 25         element.innerText = cotent;
 26     } else {
 27         element.textContent = cotent;
 28     }
 29 }
 30 
 31 //动态创建表格
 32 function createTable(parent, headData, bodyData) {
 33     var table = createHead(parent, headData);
 34     createBody(table,bodyData);
 35 }
 36 
 37 //表头
 38 function createHead(parent, headData) {
 39     //表头
 40     var table = document.createElement('table');
 41     parent.appendChild(table);
 42     table.border = '1px';
 43     table.width = '500px';
 44     table.cellSpacing = '0';
 45 
 46     var thead = document.createElement('thead');
 47     table.appendChild(thead);
 48 
 49     var tr = document.createElement('tr');
 50     thead.appendChild(tr);
 51     tr.style.height = '50px';
 52     tr.style.backgroundColor = 'lightgray';
 53     //生成表头中的列
 54     headData.forEach(function(item) {
 55         var th = document.createElement('th');
 56         tr.appendChild(th);
 57         setInnerText(th, item);
 58     });
 59     return table;
 60 }
 61 
 62 //数据行
 63 function createBody(table,bodyData) {
 64     var tbody = document.createElement('tbody');
 65     table.appendChild(tbody);
 66     tbody.style.textAlign = 'center'; //居中显示
 67 
 68     bodyData.forEach(function(item) {
 69         //创建行
 70         tr = document.createElement('tr');
 71         tbody.appendChild(tr);
 72 
 73         //创建列
 74         //遍历对象
 75         for(var key in item) {
 76             //inem[key]
 77             var td = document.createElement('td');
 78             tr.appendChild(td);
 79             setInnerText(td, item[key]);
 80         }
 81         //操作列
 82         td = document.createElement('td');
 83         tr.appendChild(td);
 84         //创建删除的超链接
 85         var link = document.createElement('a');
 86         link.href = 'javascript:void(0)';
 87         td.appendChild(link);
 88         setInnerText(link, '删除');
 89         //注册时间
 90         link.onclick = linkClick;
 91     });
 92 
 93     function linkClick() {
 94         //提示
 95         var r = confirm('是否删除');
 96         //移除元素 
 97         if(r) {
 98             var tr = this.parentNode.parentNode;
 99             tbody.removeChild(tr);
100         }
101     }
102 }
103 //动画js
104 function dong(element,target,callback) {
105                 var step = 10;
106                 if (element.c) {
107                          clearInterval(element.c);
108                      }
109                  element.c = setInterval(function() {
110                      
111                     var b = element.offsetLeft;
112                     if (b > target) {
113                         step = - Math.abs(step);
114                     }
115                     if(Math.abs(b - target) <= Math.abs(step)) {
116                         element.style.left = target + 'px';//防止超出500px
117                         clearInterval(element.c);
118                         if (callback) {
119                             callback();
120                         }
121                         
122                         return;//返回结束,不继续往下执行
123                     }
124                     b += step;
125                     element.style.left = b + 'px';
126                 }, 5)
127             }
128 </script>

轮播图js代码如下:

  1 <script type="text/javascript">
  2             var c = 2000;
  3             var box = dgb('a1');
  4             var mbox = dgb('a2');
  5             var ul = mbox.children[0];
  6             var ol = mbox.children[1];
  7 
  8             //获取箭头里的元素
  9             var jiantou = box.children[1];
 10             var left = dgb('left');
 11             var right = dgb('right');
 12             //获取图片宽度
 13             var imgWidth = mbox.offsetWidth;
 14             //动态生成序号
 15             //01获取图片的个数
 16             var imgShu = ul.children.length;
 17 
 18             for(i = 0; i < imgShu; i++) {
 19                 //02创建序号
 20                 var li = document.createElement('li');
 21                 ol.appendChild(li);
 22                 setInnerText(li, i + 1)
 23                 //记录自己的索引
 24                 li.index = i;
 25                 //给序号li注册点击事件
 26                 li.onclick = fun;
 27                 if(i === 0) {
 28                     li.className = 'a5';
 29                 }
 30             }
 31 
 32             function fun() {
 33                 //让图片动起来
 34                 dong(ul, -this.index * imgWidth);
 35                 //高亮
 36                 for(i = 0; i < imgShu; i++) {
 37                     li = ol.children[i];
 38                     li.className = '';
 39                 }
 40                 this.className = 'a5';
 41                 //让第一张默认选中
 42                 index = this.index;
 43             }
 44             //箭头的出现和后退前进
 45 
 46             box.onmouseenter = function() {
 47                 jiantou.style.display = 'block';
 48                 clearInterval(s);
 49             }
 50             box.onmouseleave = function() {
 51                 jiantou.style.display = 'none';
 52                 s = setInterval(function(){
 53                 right.click();
 54             },c);
 55             }
 56             //点击右键头下一张
 57             var index = 0;
 58             right.onclick = function(){
 59                 //等下一次点击时,索引等于最后一张时,
 60                 //让索引等于0并令ul的坐标等于第一张,
 61                 //再动画形式到第二张
 62                 //也就是复制图点击下一张时,
 63                 //先瞬间到第一张在以动画的形式到第二张
 64                 if (index === imgShu) {
 65                     index = 0;
 66                     ul.style.left = 0 + 'px'
 67                 }
 68                 
 69                 index++;
 70                 if(index < imgShu){
 71                     ol.children[index].click();
 72                 }else{
 73                     //移动画的方式一到最后一张
 74                 dong(ul,-index * imgWidth);    
 75                 for(i = 0; i < imgShu; i++) {
 76                     li = ol.children[i];
 77                     li.className = '';
 78                 }
 79                 //选中第一个序号
 80                 ol.children[0].className = 'a5';
 81                 }
 82             }
 83             //点击左箭头上一张
 84             left.onclick = function(){
 85                 if(index === 0){
 86                     index = imgShu;
 87                     ul.style.left = -index * imgWidth + 'px'
 88                 }
 89                 index--;
 90                 if(index >= 0){
 91                     ol.children[index].click();
 92                 }
 93             }
 94             
 95             //4无缝滚动
 96             //4.1复制第一个li的图片
 97             var cloneLi = ul.children[0].cloneNode(true);
 98             ul.appendChild(cloneLi);
 99             //自动
100             var s = setInterval(function(){
101                 right.click();
102             },c)
103         </script>
View Code

第一步:

先获取所有元素

第二步:

一. 动态生成序号

  0获取图片宽度

  1获取图片的个数

  2创建序号

  3给序号li注册点击事件

    3.1记录自己的索引

  4让图片动起来

  5让点中的高亮

  6让第一张默认选中

 

 1 var imgWidth = mbox.offsetWidth;
 2             //动态生成序号
 3             //01获取图片的个数
 4             var imgShu = ul.children.length;
 5             for(i = 0; i < imgShu; i++) {
 6                 //02创建序号
 7                 var li = document.createElement('li');
 8                 ol.appendChild(li);
 9                 setInnerText(li, i + 1)
10                 //记录自己的索引
11                 li.index = i;
12                 //给序号li注册点击事件
13                 li.onclick = fun;
14                 if(i === 0) {
15                     li.className = 'a5';
16                 }
17             }
18 
19             function fun() {
20                 //让图片动起来
21                 dong(ul, -this.index * imgWidth);
22                 //高亮
23                 for(i = 0; i < imgShu; i++) {
24                     li = ol.children[i];
25                     li.className = '';
26                 }
27                 this.className = 'a5';
28                 //让第一张默认选中
29                 index = this.index;
30             }
View Code

 

二. 箭头的出现和后退前进

 

  1鼠标进入事件

  2鼠标移出事件

  3点击右键头下一张

    3.1 复制第一个li的图片

    3.2 等下一次点击时,索引等于最后一张时,让索引等于0并令ul的坐标等于第一张,再动画形式到第二张,也就是复制图点击下一张时,先瞬间到第一张在以动画的形式到第二张,选中第一个序号

 

  4点击左箭头上一张

    4.1如上相反

 1 //箭头的出现和后退前进
 2 
 3             box.onmouseenter = function() {
 4                 jiantou.style.display = 'block';
 5                 clearInterval(s);
 6             }
 7             box.onmouseleave = function() {
 8                 jiantou.style.display = 'none';
 9                 s = setInterval(function(){
10                 right.click();
11             },c);
12             }
13             //点击右键头下一张
14             var index = 0;
15             right.onclick = function(){
16                 //等下一次点击时,索引等于最后一张时,
17                 //让索引等于0并令ul的坐标等于第一张,
18                 //再动画形式到第二张
19                 //也就是复制图点击下一张时,
20                 //先瞬间到第一张在以动画的形式到第二张
21                 if (index === imgShu) {
22                     index = 0;
23                     ul.style.left = 0 + 'px'
24                 }
25                 
26                 index++;
27                 if(index < imgShu){
28                     ol.children[index].click();
29                 }else{
30                     //移动画的方式一到最后一张
31                 dong(ul,-index * imgWidth);    
32                 for(i = 0; i < imgShu; i++) {
33                     li = ol.children[i];
34                     li.className = '';
35                 }
36                 //选中第一个序号
37                 ol.children[0].className = 'a5';
38                 }
39             }
40             //点击左箭头上一张
41             left.onclick = function(){
42                 if(index === 0){
43                     index = imgShu;
44                     ul.style.left = -index * imgWidth + 'px'
45                 }
46                 index--;
47                 if(index >= 0){
48                     ol.children[index].click();
49                 }
50             }
51             
52             //4无缝滚动
53             //4.1复制第一个li的图片
54             var cloneLi = ul.children[0].cloneNode(true);
55             ul.appendChild(cloneLi);
View Code

 

三. 自动滚动

  1自动滚动

  2鼠标移入停止定时器

  3鼠标移出开始定时器

1 var s = setInterval(function(){
2                 right.click();
3             },c)
View Code

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!