JavaScript课程——Day06（定时器、运动框架封装、轮播图）
1、定时器
超时调用：
- 超时定时器：延迟执行，延迟某个特定的时间开始执行，只执行一次
- 一般用于咨询弹窗、网站广告弹窗等相关操作
语法：
设置：var 定时器标示 = setTimeout(函数,毫秒); 清除：clearTimeout(定时器标示);
间歇调用：
- 间歇调用：隔某段时间就会执行一次，会一直执行
- 一般用于轮播图、倒计时、抽奖等相关操作
var 定时器表示 = setinterval(函数,毫秒)； 清除：clearInterval(定时器标示);
2、运动框架封装
运动框架封装中的一些问题：
2.1、不智能，点一下动一下（解决：添加定时器）
2.2、停不来（如果到了500，清除定时器）
2.3、多次点击会加速
2.4、对外界依赖过多
2.5、只能从左向右，还不能从右向左
2.6、没有封装
2.7、dir不应该由用户传入，而应该由程序确定
2.8、添加回调函数（以函数做为参数传入到某个函数内部，这个函数就是回调函数）
function move(ele, attr, target, callback) { clearInterval(ele.timer); // 先清再开 ele.timer = setInterval(function () { var now = parseInt(getStyle(ele, attr)); // 当前的位置 var dir = now < target ? 10 : -10; // 如果当前位置比目标小，则加过去，否则你就减过去 now += dir; // 下次要运动到的位置 if ((now >= target && dir > 0) || (now <= target && dir < 0)) { clearInterval(ele.timer); now = target; // 执行回调函数 if (callback) { callback(); } } ele.style[attr] = now + 'px'; // 更新元素的位置 }, 30); } function getStyle(ele, attr) { if (window.getComputedStyle) { // 标准浏览器 return getComputedStyle(ele)[attr]; } else { // IE8及以下 return ele.currentStyle[attr]; } }
3、轮播图
<!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; } ul, li { list-style: none; } #box { width: 600px; height: 400px; border: 10px solid #333; margin: 50px auto; overflow: hidden; position: relative; } #box ul li { float: left; } #box ul { width: 2400px; height: 400px; position: absolute; left: 0; top: 0; } #box p { width: 100%; height: 20px; /* background: pink; */ position: absolute; left: 0; bottom: 20px; text-align: center; } #box p span { display: inline-block; width: 20px; height: 20px; background: #333; border-radius: 50%; cursor: pointer; } #box p span.active { background: red; } #box .left, #box .right { position: absolute; width: 45px; height: 100px; top: 150px; background: url(img/sprite.png) no-repeat; } #box .left { left: 0; } #box .right { right: 0; background-position: -45px 0; } </style> </head> <body> <div id="box"> <ul> <li><img src="img/t1.png" alt=""></li> <li><img src="img/t2.png" alt=""></li> <li><img src="img/t3.png" alt=""></li> <li><img src="img/t1.png" alt=""></li> </ul> <a href="javascript:;" class="left"></a> <a href="javascript:;" class="right"></a> <p> <span class="active"></span> <span></span> <span></span> </p> </div> <script src="move.js"></script> <script> var box = document.getElementById('box'); // 绑定移入移出效果用到 var ul = box.querySelector('ul'); // 改变ul的left值用到 var span = box.querySelectorAll('span'); // 分页按钮 var left = box.querySelector('.left'); // 左按钮 var right = box.querySelector('.right'); // 右按钮 var imgW = 600; // 单张图的宽度 var count = 0; // 指针，即第几张图显示 var timer = null; // 一打开就执行 timer = setInterval(auto, 2000); // 移入box上停止计时器 box.onmouseover = function () { clearInterval(timer); } // 移出box上开启计时器 box.onmouseout = function () { timer = setInterval(auto, 2000); } // 下一张 right.onclick = function () { auto(); } // 上一张 left.onclick = function () { // 先判断，再减减 if (count <= 0) { count = span.length; ul.style.left = -count * imgW + 'px'; } count--; change(); } // 划上分页 for (var i = 0; i < span.length; i++) { span[i].index = i; span[i].onmouseover = function () { count = this.index; change(); } } function change() { move(ul, 'left', -count * imgW); // 调用封装好的运动函数，move(元素,属性,目标值) for (var i = 0; i < span.length; i++) { span[i].className = ''; } if (count >= span.length) { span[0].className = 'active'; } else { span[count].className = 'active'; } } function auto() { // 设置间歇定时器，语法：var 定时器标示 = setInterval(函数,毫秒); // 无缝轮播，需要先判断，再++ if (count >= span.length) { count = 0; // count变为0 ul.style.left = 0; // console.log('到第一张了'); } count++; // count自增与span之间的关系 change(); } </script> </body> </html>
外链js文件
function move(ele, attr, target, callback) { clearInterval(ele.timer); // 先清再开 ele.timer = setInterval(function () { var now = parseInt(getStyle(ele, attr)); // 当前的位置 var dir = now < target ? 50 : -50; // 如果当前位置比目标小，则加过去，否则你就减过去 now += dir; // 下次要运动到的位置 if ((now >= target && dir > 0) || (now <= target && dir < 0)) { clearInterval(ele.timer); now = target; // 执行回调函数 if (callback) { callback(); } } ele.style[attr] = now + 'px'; // 更新元素的位置 }, 30); } function getStyle(ele, attr) { if (window.getComputedStyle) { // 标准浏览器 return getComputedStyle(ele)[attr]; } else { // IE8及以下 return ele.currentStyle[attr]; } }
