标签：动态 charset dde sed 操作 white off lin 动画
今天学到轮播图以前看似很简单，今天一做对于我这新手还是挺难，主要还是逻辑思维。
现在就对自己做的轮播图在整体的一步一步的写一下：
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"><</span> <span id="right">></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>
第一步：
先获取所有元素
第二步：
一. 动态生成序号
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 }
二. 箭头的出现和后退前进
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);
三. 自动滚动
1自动滚动
2鼠标移入停止定时器
3鼠标移出开始定时器
1 var s = setInterval(function(){ 2 right.click(); 3 },c)
标签：动态 charset dde sed 操作 white off lin 动画
原文地址：https://www.cnblogs.com/hewenwu199712/p/9801035.html
