黑马程序员的视频教程做的轮播图。
点击两边的箭头切换图片,点击数字切换图片,定时器2s自动切换图片,
<!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>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="all" id='box'>
<div class="screen">
<ul>
<li><img src="./images/11.jpg" width="500"/></li>
<li><img src="./images/22.jpg" width="500"/></li>
<li><img src="./images/33.jpg" width="500"/></li>
<li><img src="./images/44.jpg" width="500"/></li>
<li><img src="./images/55.jpg" width="500"/></li>
</ul>
<ol>
</ol>
</div>
<div id="arr">
<span id="left"><</span>
<span id="right">></span>
</div>
</div>
<script src="./js/common.js"></script>
<script src="./js/animate.js"></script>
<script src="./js/index.js"></script>
</body>
</html>
js页面
common.js页面
// 写一个函数,处理innerText和textContent的兼容性问题
// 获取元素之间的内容
function getInnerText(element) {
// 判断element是否支持innerText
if (typeof element.innerText === 'string') {
return element.innerText;
} else {
return element.textContent;
}
}
// 设置元素之间的内容
function setInnerText(element, content) {
// 判断element是否支持innerText
if (typeof element.innerText === 'string') {
element.innerText = content;
} else {
element.textContent = content;
}
}
// 获取min-max之间的随机整数
function getRandom(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min; //The maximum is inclusive and the minimum is inclusive
}
// 根据id获取元素
function my$(id) {
return document.getElementById(id);
}
// 处理firstElementChild的兼容性问题
function getFirstElementChild(parent) {
// 如果当前浏览器 支持firstElementChild
if (parent.firstElementChild) {
return parent.firstElementChild;
}
var node, nodes = parent.childNodes, i = 0;
while (node = nodes[i++]) {
if (node.nodeType === 1) {
return node;
}
}
return null;
}
// 注册事件 ,处理兼容性问题
function addEventListener(element, eventName, callback) {
if (element.addEventListener) {
element.addEventListener(eventName, callback, false);
} else if (element.attachEvent) {
element.attachEvent('on' + eventName, callback);
} else {
element['on' + eventName] = callback;
}
}
// 移除事件, 处理兼容性问题
function removeEventListener(element, eventName, callback) {
if (element.removeEventListener) {
element.removeEventListener(eventName, callback, false);
} else if (element.detachEvent) {
element.detachEvent('on' + eventName, callback);
} else {
element['on' + eventName] = null;
}
}
// 获取页面滚动出去的距离。处理兼容性
function getScroll() {
return {
scrollTop: document.documentElement.scrollTop || document.body.scrollTop,
scrollLeft: document.documentElement.scrollLeft || document.body.scrollLeft
}
}
// 获取鼠标在页面上的坐标 解决ie8的问题
function getPage(e) {
return {
pageX: e.clientX + getScroll().scrollLeft,
pageY: e.clientY + getScroll().scrollTop
}
}
animate.js
function animate(element, target, callback) {
// 判断之前是否开启了定时器
if (element.timerId) {
clearInterval(element.timerId);
}
// 让每一个执行动画的元素,记录自己的定时器
element.timerId = setInterval(function () {
// 当前坐标
var current = element.offsetLeft;
// 步进
var step = 20;
// 当当前位置 > 目标位置 step 应该是负数
if (current > target) {
step = - Math.abs(step);
}
// 编码要避免硬编码
// if (current >= 500)
// 如果当前位置和目标位置的差小于step,就认为到达目标位置
if (Math.abs(current - target) <= Math.abs(step)) {
element.style.left = target + 'px';
clearInterval(element.timerId);
// 回调函数
if (callback) {
callback();
}
return;
}
current += step;
element.style.left = current + 'px';
}, 15);
}
index.js页面
// 定时器的时间间隔
var interval = 2000;
// 0 获取元素
var box = document.getElementById('box');
var screen = box.children[0];
var ul = screen.children[0];
var ol = screen.children[1];
// 获取箭头的容器 arrow
var arr = box.children[1];
var arrLeft = arr.children[0];
var arrRight = arr.children[1];
// 获取图片的宽度
var imgWidth = screen.offsetWidth;
// 1 动态生成序号
// 获取图片的个数
var count = ul.children.length;
var i = 0;
for (; i < count; i++) {
// 创建序号
var li = document.createElement('li');
ol.appendChild(li);
setInnerText(li, i + 1);
// 3 点击序号切换图片
// li记录它自己的索引
li.index = i;
// 3.1 给序号li注册点击事件
li.onclick = liClick;
// 3.4 让第一个序号默认选中
if (i === 0) {
li.className = 'current';
}
}
function liClick() {
// 3.2 让图片以动画的方式移动
animate(ul, -this.index * imgWidth);
// 3.3 让所有的序号li取消高亮显示,让当前li高亮显示
for (i = 0; i < count; i++) {
li = ol.children[i];
li.className = '';
}
this.className = 'current';
// 4 点击序号li,重新记录全局的index
index = this.index;
}
// 2 鼠标经过显示箭头 离开隐藏箭头
box.onmouseover = function () {
arr.style.display = 'block';
// 停止定时器
clearInterval(timerId);
}
box.onmouseout = function () {
arr.style.display = 'none';
// 鼠标离开,开启定时器
timerId = setInterval(function () {
arrRight.click();
}, interval);
}
// 4 点击箭头实现上一张和下一张的功能
var index = 0; // 默认是第一张图片的索引
// 4.1下一张
arrRight.onclick = function () {
// 当是克隆的第一张图片(真正的最后一张图片)的时候,偷偷的把ul设置到真正的第一张图片的位置
if (index === count) {
index = 0;
ul.style.left = '0px';
}
index++;
if (index < count) {
// animate(ul, -index * imgWidth);
// 让对应的序号li高亮显示
ol.children[index].click();
} else {
// 以动画的方式切换到克隆的第一张图片
animate(ul, -index * imgWidth);
// 取消所有的序号li的高亮显示
for (i = 0; i < count; i++) {
li = ol.children[i];
li.className = '';
}
ol.children[0].className = 'current';
}
}
// 4.2上一张
arrLeft.onclick = function () {
// 判断index === 0 如果是第一张,偷偷的切换到克隆的第一张(真正的最后一张)
if (index === 0) {
index = count;
ul.style.left = -index * imgWidth + 'px';
}
index--;
// if (index >= 0) {
ol.children[index].click();
// }
}
// 4.3 无缝滚动
// 复制第一个li,并且添加到ul的最后
// cloneNode 的参数 true 会复制子元素
// cloneNode 的参数 false 不会复制子元素
var cloneLi = ul.children[0].cloneNode(true);
ul.appendChild(cloneLi);
// 5 自动切换图片
var timerId = setInterval(function () {
arrRight.click();
}, interval);