这个我的项目一多起来了，还是分个序号比价好一点，你好我好大家好，而后对于这个标点符号的问题，我打字真的很不喜爱打标点符号，不是不好按，按个逗号其实也是顺便的事件，可能就是养成习惯了，就喜爱按个空格来离开，也不知道你们看有标点和没得标点看起来有区别没得，如果有区别的话我就缓缓养成习惯打上标点吧！！！欧尔整点感叹号这些还是能够，咱们明天书接上回因为是大我的项目所以用了另一种出现的办法。
1.
咱们后这个章节前面的内容的我的项目根本都要以一个本人编写的缓冲动画的函数为根底，所以我先把这个函数贴上来
缓冲动画函数终极版
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { position: absolute; top: 50px; width: 100px; height: 100px; background-color: skyblue; } </style></head><body> <div class="box"></div> <button>500</button> <button>800</button> <script> var box = document.querySelector('div') var btns = document.querySelectorAll('button') function animate(obj, target, callback) { clearInterval(obj.timer) obj.timer = setInterval(function() { if (obj.offsetLeft == target) { clearInterval(obj.timer) // callback必须写到完结定时器这里 if (callback) { callback() } } var step = (target - obj.offsetLeft) / 10 step = step < 0 ? Math.floor(step) : Math.ceil(step) obj.style.left = obj.offsetLeft + step + 'px' }, 15) } btns[0].onclick = function() { animate(box, 500) } btns[1].onclick = function() { animate(box, 800, function() { box.style.backgroundColor = 'red' }) } </script></body></html>2.
来了 一个非常非常经典的案例，轮播图，纯手打还是要点逻辑的
我前面给她间接单领进去独自放在了一个html外面
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } ol, ul { list-style: none; } a { text-decoration: none; } .banner { position: relative; width: 721px; height: 455px; margin: 100px auto; overflow: hidden; } .banner >a { display: none; position: absolute; width: 40px; height: 40px; background-color: rgba(0, 25, 0, .5); font-size: 20px; color: white; text-align: center; line-height: 40px; z-index: 1; cursor: pointer; } .banner a:nth-child(2) { top: 50%; right: 0; transform: translateY(-50%); } .banner a:nth-child(1) { top: 50%; left: 0; transform: translateY(-50%); } .banner ol { position: absolute; bottom: 30px; left: 40px; color: white; } ol li { float: left; width: 8px; height: 8px; margin-left: 5px; border: 2px solid white; border-radius: 50%; cursor: pointer; } .current { background-color: #fff; } ul { position: absolute; left: 0; top: 0; width: 500%; } ul li { float: left; } </style> <script src="./js/animate.js"></script> <script src="./js/test.js"></script></head><body> <div class="banner"> <a href="javascript:;" class="arrow_r"><</a> <a href="javascript:;" class="arrow_l">></a> <ul> <li><a href="javascript:;"><img src="./upload/focus.jpg" alt=""></a></li> <li><a href="javascript:;"><img src="./upload/focus1.jpg" alt=""></a></li> <li><a href="javascript:;"><img src="./upload/focus2.jpg" alt=""></a></li> <li><a href="javascript:;"><img src="./upload/focus3.jpg" alt=""></a></li> </ul> <ol> </ol> </div></body></html>而后最最重要的是他的js局部，十分值得回味，每一步我都写出了我的想法以及逻辑window.addEventListener('load', function() { // 1.先实现移入轮播图显示暗藏点击按钮 var banner = document.querySelector('.banner'); var arrR = banner.querySelector('.arrow_l'); var arrL = banner.querySelector('.arrow_r'); banner.addEventListener('mouseenter', function() { arrL.style.display = 'block'; arrR.style.display = 'block'; // 7.1鼠标移入应该暂停轮播图 即进行定时器 clearInterval(timer); }); banner.addEventListener('mouseleave', function() { arrL.style.display = 'none'; arrR.style.display = 'none'; // 7.2移出持续计时器 timer = setInterval(function() { arrR.click(); },2000) }); // 2.动静生成小圆圈 利用ul外面li的个数 var ul = banner.querySelector('ul'); var ol = banner.querySelector('ol'); for (var i = 0; i < ul.children.length; i++) { var li = document.createElement('li'); li.setAttribute('data-index', i); // 2.2小圆排他思维 点击一个 其余为cuuret类 其余清空 // 2.3点击小圆滚动图片须要自定义data-index left值为date-index * width li.addEventListener('click', function() { for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ''; } this.className = 'current'; var index = this.getAttribute('data-index'); // 5.一个bug 点击右键或者点击小圆后 再点击小圆或者右键 会乱跳 是因为此时 num与circle没有任何关联 点击一个后 再点击另一个事件 就会按他的num或者circle走 // 此时须要将两个值都给到index给她赋值 就会有关联了 num = index; circle = index; animate(ul, -index * banner.offsetWidth); }) ol.appendChild(li); } // 2.1创立好后给第一个小圆增加默认current类 ol.firstElementChild.className = 'current'; // 3.2因为咱们间接动html代码 会导致小原点也减少一个 所以要在小圆点获取ul li个数前面 动静克隆一个到ul最初面 ul.appendChild(ul.firstElementChild.cloneNode(true)); // 3.点击左边按钮一次就滚动一次 开始点击按钮事件 // 首先要明确ul的挪动间隔等于 以后点击的第几次 * width var num = 0; var circle = 0; // 8.点击时还是有bug 点击过快会切换的很快 通过节流阀来实现一个函数再来回调解决 var flag = true; arrR.addEventListener('click', function() { // 8.1如果flag为true才执行 一进去先给flag为false 如果没实现这个函数永远是flase 用户点击就没的作用 if (flag) { flag = false; // 3.1当走到最初一张时以后 ul显示几个li就复制几个li到最初面（html代码）而后判断num是否等于4 如果是将num赋值为0 同时迅速将ul left为0 if (num == ul.children.length - 1) { num = 0; ul.style.left = 0; }; // 点一次就要加一次 num++; // 8.2通过回调函数 实现了这个切换能力为true animate(ul, -num * banner.offsetWidth,function() { flag = true; }); // 4.点击右侧按钮小圆跟着动 须要一个变量circle 点一次减少一次 获取ol li 下标就为circle circle++; // 4.1判断circle是否为最初一张 第四张 如果是就赋值为0、 if (circle == ol.children.length) { circle = 0; } for (var i = 0; i < ol.children.length;i++) { ol.children[i].className = ''; }; ol.children[circle].className = 'current'; } }); // 6.左侧按钮点击 arrL.addEventListener('click', function() { if (flag) { flag = false; // 6.2此时应该判断num是否为第一张也就是0 如果是num就为最初一张4 且left为4*width if (num == 0) { num = ul.children.length -1; ul.style.left = num * banner.offsetWidth; }; // 6.1先批改为-- num--; animate(ul, -num * banner.offsetWidth, function() { flag = true; }); // 6.3circle也要为-- circle--; // 6.4此时应该判断circle是否小于0 如果是就从新赋值为3 if (circle < 0) { circle = ol.children.length - 1; } for (var i = 0; i < ol.children.length;i++) { ol.children[i].className = ''; }; ol.children[circle].className = 'current'; } }); // 7.自动播放性能利用定时器 还有手动调用事件 var timer = setInterval(function() { arrR.click(); },2000)})3.
趁热打铁，咱们马上再来一个挪动端的轮播图，跟pc端还是有点差距的，它是通过transform来实现的
html局部很简略
<div class="focus"> <ul> <li><img src="upload/focus3.jpg" alt=""></li> <li><img src="upload/focus1.jpg" alt=""></li> <li><img src="upload/focus2.jpg" alt=""></li> <li><img src="upload/focus3.jpg" alt=""></li> <li><img src="upload/focus1.jpg" alt=""></li> </ul> <!-- 小圆点 --> <ol> <li class="current"></li> <li></li> <li></li> </ol> </div>js局部逻辑性我感觉没做纯熟之前是比pc难的，做纯熟过后其实还是能够的，三下五除二就搞完了window.addEventListener('load', function() { // 1.主动轮播性能 // 定义一个变量num 第一张为0 挪动端的切换由translate实现 var focus = document.querySelector('.focus'); var ul = focus.querySelector('ul'); var num = 0; var imgWidth = focus.offsetWidth; var timer = setInterval(function() { num++; var translateX = -num * imgWidth; ul.style.transition = 'transform .3s'; ul.style.transform = 'translateX('+translateX+'px)'; }, 2000) // 2.无缝切换 挪动端无缝切换 有一个新的事件 transitionend 通过这个事件判断num 来做到无缝切换 ul.addEventListener('transitionend',function() { if (num >= 3) { num = 0; var translateX = -num * imgWidth; ul.style.transition = 'none'; ul.style.transform = 'translateX('+translateX+'px)'; // 5.2往右边滑num--小于0了 要起到无缝切换成果还要在此进行一个判断 } else if (num < 0 ) { num = 2; var translateX = -num * imgWidth; ul.style.transition = 'none'; ul.style.transform = 'translateX('+translateX+'px)'; } // 3.小圆点跟着图走 用到新属性 classlist 能够增加类名删除类名 // 配合queryselector应用 能够疾速把以后带有该class名的去除 focus.lastElementChild.querySelector('.current').classList.remove('current'); focus.lastElementChild.children[num].classList.add('current'); }); // 4.手指拖动轮播图 手指按下的时候取得按下的坐标值 挪动的时候一直地用挪动的坐标值减去按下的坐标值 盒子的地位 = 盒子的原始地位+挪动的地位 var x = 0; focus.addEventListener('touchstart', function(e) { x = e.targetTouches[0].pageX; clearInterval(timer); }); var moveX = 0; // 8.如果只是手指触摸没有挪动 就不必进行touchend的判断 var flag = false; focus.addEventListener('touchmove', function(e) { moveX = e.targetTouches[0].pageX - x; var box = -num * imgWidth + moveX; ul.style.transition = 'none'; ul.style.transform = 'translateX('+box+'px)'; flag = true; // 7.分明滑动的默认行为 e.preventDefault(); }); // 5.要实现图片切换高低一张的成果 须要在事件手指来到屏幕中进行 判断挪动间隔的绝对值是否大于五十 如果是 就阐明是要进行切换 并在外面再次判断真正挪动间隔是否为负数 // 为负数就切换到上一张 为正数就切换到下一章 focus.addEventListener('touchend', function(e) { if (flag) { if (Math.abs(moveX) > 50) { if (moveX > 0 ) { num--; } else { num++; } } var translateX = -num * imgWidth; // 5.1留神此处的transition 必须要有成果 不然不进入transitionend进行判断 导致没有无缝切换成果以及小圆点跟着走的成果 ul.style.transition = 'transform .3s'; ul.style.transform = 'translateX('+translateX+'px)'; flag = false; } // 6.点击过后持续不再点击持续开启定时器轮播 要先清空一下 使得只有一个定时器在运行 clearInterval(timer); timer = setInterval(function() { num++; var translateX = -num * imgWidth; ul.style.transition = 'transform .3s'; ul.style.transform = 'translateX('+translateX+'px)'; }, 2000); }); })4.
而后剩下的，就是一些插件应用了，这里插件不做太具体的阐明因为今天开始进入jq的温习，有的是插件让你用，而后还有一个本地存储的案例尽管不难，但前面利用应该很宽泛，sessionStorage生命周期在浏览器敞开之前，只能在本页面数据共享，localStorage生命周期永恒存在，可多个页面数据共享，这是一个记住用户名的案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <!-- 如果勾选记住用户名， 下次用户关上浏览器，就在文本框外面主动显示上次登录的用户名 --> <input type="text" name="" id=""> <input type="checkbox">记住用户名 <script> var ipts = document.querySelectorAll('input') ipts[1].onclick = function() { if (this.checked) { localStorage.setItem('uname', ipts[0].value) } else { localStorage.removeItem('uname') } } if(localStorage.getItem('uname')) { ipts[0].value = localStorage.getItem('uname') ipts[1].checked = true } </script></body></html>前端爱好者，望大佬给个内推机会！！！