1、网页轮播图
window.addEventListener('load', function() {
// 1)获取元素
var arrow_l = document.querySelector('.arrow_l');
var arrow_r = document.querySelector('.arrow_r');
var focus = document.querySelector('.focus');
// 2)鼠标经过轮播图 显示隐藏左右按钮
focus.addEventListener('mouseenter', function() {
arrow_l.style.display = 'block';
arrow_r.style.display = 'block';
clearInterval(timer);
// 变量不用,要清空
timer = null;
});
focus.addEventListener('mouseleave', function() {
arrow_l.style.display = 'none';
arrow_r.style.display = 'none';
// 开启定时器
timer = setInterval(function() {
// 手动调用点击事件
arrow_r.onclick();
}, 2000);
});
// 3) 动态生成小圆圈 有几张图片,就生成几个小圆圈
// 获取ul对象 必须限定是谁的ul
var ul = focus.querySelector('ul');
var ol = focus.querySelector('ol');
var focusWidth = focus.offsetWidth; // 轮播图盒子的宽度
// ol下li的个数取决于ul下li的个数
for (var i = 0; i < ul.children.length; i++) {
// 创建小li
var li = document.createElement('li');
//记录当前小圆圈的索引号 通过自定义属性来做
li.setAttribute('index',i);
// 把li插入ol里面
ol.appendChild(li);
// 4)小圆圈的排他思想
li.addEventListener('click', function() {
for (var i = 0; i < ol.children.length; i++) {
// 清除所有的小li 的current 类
ol.children[i].className = '';
}
// 当前的小 li 设置 current 类
this.className = 'current';
// 5)点击小圆圈,移动图片 移动的是ul
// 点击当前小圆圈,获取索引
var index = this.getAttribute('index');
// 点击了某个小li 要把这个li的索引号给num
num = index;
// 点击了某个小li 要把这个li的索引号给circle
circle = index;
// ul移动距离的算法: 小圆圈的索引号 乘以 图片的宽度
animate(ul, -index*focusWidth);
});
}
// ol里面的第一个li设置类名为 current,默认选择第一个li
ol.children[0]