<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { padding: 0; margin: 0; list-style: none; border: 0; } .all { width: 500px; height: 200px; padding: 7px; border: 1px solid #ccc; margin: 100px auto; position: relative; } .screen { width: 500px; height: 200px; overflow: hidden; position: relative; } .screen li { width: 500px; height: 200px; overflow: hidden; float: left; } .screen ul { position: absolute; left: 0; top: 0px; width: 3000px; } .all ol { position: absolute; right: 10px; bottom: 10px; line-height: 20px; text-align: center; } .all ol li { float: left; width: 20px; height: 20px; background: #fff; border: 1px solid #ccc; margin-left: 10px; cursor: pointer; } .all ol li.current { background: yellow; } #arr { display: none; z-index: 1000; } #arr span { width: 40px; height: 40px; position: absolute; left: 5px; top: 50%; margin-top: -20px; background: #000; cursor: pointer; line-height: 40px; text-align: center; font-weight: bold; font-family: '黑体'; font-size: 30px; color: #fff; opacity: 0.3; border: 1px solid #fff; } #arr #right { right: 5px; left: auto; } </style> </head> <body> <div class="all" id='box'> <div class="screen"> <ul> <li><img src="images/wf1.jpg" width="500" height="200"/></li> <li><img src="images/wf2.jpg" width="500" height="200"/></li> <li><img src="images/wf3.jpg" width="500" height="200"/></li> <li><img src="images/wf4.jpg" width="500" height="200"/></li> <li><img src="images/wf5.jpg" width="500" height="200"/></li> </ul> <ol> </ol> </div> <div id="arr"><span id="left"><</span><span id="right">></span></div> </div> <script src="common.js"></script> <script src="animate.js"></script> <script src="index.js"></script> </body> </html>
common中的代码
function my$(id) { return document.getElementById(id); } // 处理浏览器兼容性 // 获取第一个子元素 function getFirstElementChild(element) { var node, nodes = element.childNodes, i = 0; while (node = nodes[i++]) { if (node.nodeType === 1) { return node; } } return null; } // 处理浏览器兼容性 // 获取下一个兄弟元素 function getNextElementSibling(element) { var el = element; while (el = el.nextSibling) { if (el.nodeType === 1) { return el; } } return null; } // 处理innerText和textContent的兼容性问题 // 设置标签之间的内容 function setInnerText(element, content) { // 判断当前浏览器是否支持 innerText if (typeof element.innerText === 'string') { element.innerText = content; } else { element.textContent = content; } } // 处理注册事件的兼容性问题 // eventName, 不带on， click mouseover mouseout function addEventListener(element, eventName, fn) { // 判断当前浏览器是否支持addEventListener 方法 if (element.addEventListener) { element.addEventListener(eventName, fn); // 第三个参数 默认是false } else if (element.attachEvent) { element.attachEvent('on' + eventName, fn); } else { // 相当于 element.onclick = fn; element['on' + eventName] = fn; } } // 处理移除事件的兼容性处理 function removeEventListener(element, eventName, fn) { if (element.removeEventListener) { element.removeEventListener(eventName, fn); } else if (element.detachEvent) { element.detachEvent('on' + eventName, fn); } else { element['on' + eventName] = null; } } // 获取页面滚动距离的浏览器兼容性问题 // 获取页面滚动出去的距离 function getScroll() { var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft; var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; return { scrollLeft: scrollLeft, scrollTop: scrollTop } } // 获取鼠标在页面的位置，处理浏览器兼容性 function getPage(e) { var pageX = e.pageX || e.clientX + getScroll().scrollLeft; var pageY = e.pageY || e.clientY + getScroll().scrollTop; return { pageX: pageX, pageY: pageY } } //格式化日期对象，返回yyyy-MM-dd HH:mm:ss的形式 function formatDate(date) { // 判断参数date是否是日期对象 // instanceof instance 实例(对象) of 的 // console.log(date instanceof Date); if (!(date instanceof Date)) { console.error('date不是日期对象') return; } var year = date.getFullYear(), month = date.getMonth() + 1, day = date.getDate(), hour = date.getHours(), minute = date.getMinutes(), second = date.getSeconds(); month = month < 10 ? '0' + month : month; day = day < 10 ? '0' + day : day; hour = hour < 10 ? '0' + hour : hour; minute = minute < 10 ? '0' + minute : minute; second = second < 10 ? '0' + second : second; return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second; } // 获取两个日期的时间差 function getInterval(start, end) { // 两个日期对象，相差的毫秒数 var interval = end - start; // 求 相差的天数/小时数/分钟数/秒数 var day, hour, minute, second; // 两个日期对象，相差的秒数 // interval = interval / 1000; interval /= 1000; day = Math.round(interval / 60 / 60 / 24); hour = Math.round(interval / 60 / 60 % 24); minute = Math.round(interval / 60 % 60); second = Math.round(interval % 60); return { day: day, hour: hour, minute: minute, second: second } }
animate中的代码
// var timerId = null; // 封装动画的函数 function animate(element, target) { // 通过判断，保证页面上只有一个定时器在执行动画 if (element.timerId) { clearInterval(element.timerId); element.timerId = null; } element.timerId = setInterval(function () { // 步进 每次移动的距离 var step = 10; // 盒子当前的位置 var current = element.offsetLeft; // 当从400 到 800 执行动画 // 当从800 到 400 不执行动画 // 判断如果当前位置 > 目标位置 此时的step 要小于0 if (current > target) { step = - Math.abs(step); } // Math.abs(current - target) <= Math.abs(step) if (Math.abs(current - target) <= Math.abs(step)) { // 让定时器停止 clearInterval(element.timerId); // 让盒子到target的位置 element.style.left = target + 'px'; return; } // 移动盒子 current += step; element.style.left = current + 'px'; }, 5); }
index中的代码
// 获取元素 var box = my$('box'); var screen = box.children[0]; var ul = screen.children[0]; var ol = screen.children[1]; // 箭头 arrow var arr = my$('arr'); var arrLeft = my$('left'); var arrRight = my$('right'); // 图片的宽度 var imgWidth = screen.offsetWidth; // 1 动态生成序号 // 页面上总共有多少张图片 5 没有克隆的li var count = ul.children.length; for (var i = 0; i < count; i++) { var li = document.createElement('li'); ol.appendChild(li); setInnerText(li, i + 1); // 2 点击序号 动画的方式 切换图片 li.onclick = liClick; // 让当前li记录他的索引 // 设置标签的自定义属性 li.setAttribute('index', i); } function liClick() { // 2.1 取消其它li的高亮显示，让当前li高亮显示 for (var i = 0; i < ol.children.length; i++) { var li = ol.children[i]; li.className = ''; } // 让当前li高亮显示 this.className = 'current'; // 2.2 点击序号，动画的方式切换到当前点击的图片位置 // 获取自定义属性 var liIndex = parseInt(this.getAttribute('index')); animate(ul, -liIndex * imgWidth); // 全局变量index 和 li中的index保持一致 index = liIndex; } // 让序号1高亮显示 ol.children[0].className = 'current'; // 3 鼠标放到盒子上显示箭头 box.onmouseenter = function () { arr.style.display = 'block'; // 清除定时器 clearInterval(timerId); } box.onmouseleave = function () { arr.style.display = 'none'; // 重新开启定时器 timerId = setInterval(function () { arrRight.click(); }, 2000); } // 4 实现上一张和下一张的功能 // 下一张 var index = 0; // 第一张图片的索引 arrRight.onclick = function () { // 判断是否是克隆的第一张图片，如果是克隆的第一张图片，此时修改ul的坐标，显示真正的第一张图片 if (index === count) { ul.style.left = '0px'; index = 0; } // // 总共有5张图片，但是还有一张克隆的图片 克隆的图片的索引是5 // 4 < 5 index++; if (index < count) { // animate(ul, -index * imgWidth); // // // 获取图片对应的序号，让序号点击 ol.children[index].click(); } else { //如果是最后一张图片 以动画的方式，移动到克隆的第一张图片 animate(ul, -index * imgWidth); // 取消所有序号的高亮显示，让第一序号高亮显示 for (var i = 0; i < ol.children.length; i++) { var li = ol.children[i]; li.className = ''; } ol.children[0].className = 'current'; } } // 上一张 arrLeft.onclick = function () { // 如果当前是第一张图片，此时要偷偷的切换到最后一张图片的位置（克隆的第一张图片） if (index === 0) { index = count; ul.style.left = - index * imgWidth + 'px'; } index--; ol.children[index].click(); // // 如果不是第一张的话 index-- // if (index > 0) { // index--; // // animate(ul, -index * imgWidth); // ol.children[index].click(); // } } // 无缝滚动 // 获取ul中的第一个li var firstLi = ul.children[0]; // 克隆li cloneNode() 复制节点 // 参数 true 复制节点中的内容 // false 只复制当前节点，不复制里面的内容 var cloneLi = firstLi.cloneNode(true); ul.appendChild(cloneLi); // 5 自动切换图片 var timerId = setInterval(function () { // 切换到下一张图片 arrRight.click(); }, 2000);