共计 8583 个字符，预计需要花费 22 分钟才能阅读完成。
这个我的项目一多起来了，还是分个序号比价好一点，你好我好大家好，而后对于这个标点符号的问题，我打字真的很不喜爱打标点符号，不是不好按，按个逗号其实也是顺便的事件，可能就是养成习惯了，就喜爱按个空格来离开，也不知道你们看有标点和没得标点看起来有区别没得，如果有区别的话我就缓缓养成习惯打上标点吧！！！欧尔整点感叹号这些还是能够，咱们明天书接上回因为是大我的项目所以用了另一种出现的办法。
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>前端爱好者，望大佬给个内推机会！！！
正文完