1.鼠标移入事件
- mouseover
2.鼠标移出事件
- mouseout
3.排他思想解决Tab栏切换
- 先将所有的样式全部移除，然后再将需要的样式添加上
4.轮播图
// 当前图片下标
var currentIndex = 0;
// 序号按钮控制图片切换及自身样式改变
var orderBtns = document.querySelectorAll('i');
var li0 = document.querySelector('li');
var ul = document.querySelector('ul');
orderBtns.forEach(function (element, index) {
element.onmousemove = function () {
orderBtns.forEach(function (element, index) {
element.classList.remove('current');
});
this.classList.add('current');
console.log(index * li0.offsetWidth);
ul.style.left = - index * li0.offsetWidth + 'px';
};
});
// 左右按钮控制图片切换和按钮样式
var right = document.querySelector('.arrow-right');
right.onclick = function () {
currentIndex++;
currentIndex = currentIndex > 5 ? 0 : currentIndex;
ul.style.left = - currentIndex * li0.offsetWidth + 'px';
orderBtns.forEach(function (element, index) {
element.classList.remove('current');
});
orderBtns[currentIndex].classList.add('current');
};
var left = document.querySelector('.arrow-left');
left.onclick = function () {
currentIndex--;
currentIndex = currentIndex < 0 ? 5 : currentIndex;
ul.style.left = - currentIndex * li0.offsetWidth + 'px';
orderBtns.forEach(function (element, index) {
element.classList.remove('current');
});
orderBtns[currentIndex].classList.add('current');
};
// 自动轮播
var lunbo = setInterval(function () {
// currentIndex++;
// currentIndex = currentIndex > 5 ? 0 : currentIndex;
// ul.style.left = - currentIndex * li0.offsetWidth + 'px';
// orderBtns.forEach(function (element, index) {
// element.classList.remove('current');
// });
// orderBtns[currentIndex].classList.add('current');
right.onclick();
}, 1000);
// 鼠标进入轮播停止，鼠标移出继续轮播
var inner = document.querySelector('#inner');
inner.onmouseover = function () {
clearInterval(lunbo);
};
inner.onmouseout = function () {
lunbo = setInterval(function () {
right.onclick();
}, 1000);
}
5.手风琴
// 获取所有的li
var lis = document.querySelectorAll('li');
// 遍历li
lis.forEach(function (element, index) {
// 将每一个li都添加鼠标进入事件
element.onmouseover = function () {
// 遍历每一个li，给每一个li的宽度都设置成100px
lis.forEach(function (element, index) {
element.style.width = 100 + 'px';
});
// 给当前移入到的li的宽度设置成800px
this.style.width = 800 + 'px';
};
// 鼠标移出
element.onmouseout = function () {
// 遍历所有的li，给每一个li元素的宽度设置成240px
lis.forEach(function (element, index) {
element.style.width = 240 + 'px';
})
}
})
6.旋转木马
// 1.创建数组，将类名存放起来
var arr = ['left1', 'left2', 'middle', 'right2', 'right1'];
// 2.获取每一个li，按照数组中的顺序给li添加类名
var lis = document.querySelectorAll('li');
lis.forEach(function (element, index) {
element.className = arr[index];
});
// 3.获取右边按钮将数组中第一个元素删除，push到最后面，将调整后的数组内容添加到li的类名里
var right = document.querySelector('#arrRight');
right.onclick = function () {
arr.push(arr.shift());
lis.forEach(function (element, index) {
element.className = arr[index];
});
};
// 4.获取左边按钮将数组中最后一个元素插入到最前面，将调整后的数组内容添加到li的类名里
var left = document.querySelector('#arrLeft');
left.onclick = function () {
arr.unshift(arr.pop());
lis.forEach(function (element, index) {
element.className = arr[index];
});
};
7.新知识点——动画和过渡结束后执行的事件
用addEventListener添加事件
animationend
- 动画结束后触发的事件
transitionend
- 过度结束后触发的事件
开机动画
// 1点击关闭按钮，下方盒子高度为0 // 2当下方盒子过度结束后，box宽度设置为0 var btn = document.querySelector('#closeButton'); var bd = document.querySelector('#bottomPart'); var box = document.querySelector('#box'); btn.onclick = function (e) { bd.style.height = 0 + 'px'; bd.addEventListener('transitionend', function () { box.style.width = 0 + 'px'; }) }