135 lines
4.6 KiB
JavaScript
135 lines
4.6 KiB
JavaScript
window.addEventListener('load', function () {
|
||
var arrow_l = this.document.querySelector('.arrow_left');
|
||
var arrow_r = this.document.querySelector('.arrow_right');
|
||
var focus = this.document.querySelector('.focus');
|
||
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.click();
|
||
}, 5000)
|
||
})
|
||
var ul = focus.querySelector('ul');
|
||
var ol = focus.querySelector('.spot'); // 获取 focus 中的 ol
|
||
// console.log(ul.children.length);
|
||
|
||
var num = 0; // 通过箭头控制播放图片的变量
|
||
var circle = 0; //通过小圆圈的播放图片的变量
|
||
|
||
var focusWidth = focus.offsetWidth;
|
||
for (var i = 0; i < ul.children.length; i++) {
|
||
// 创建 li
|
||
var li = this.document.createElement('li');
|
||
|
||
li.setAttribute('index', i) // 记录当前 小圆圈的索引号
|
||
|
||
// 插入 ul
|
||
ol.appendChild(li);
|
||
|
||
// 创建 li 的同时给 该li 绑定事件，点到此li，此li变色，其他所有li褪色(排他思想)
|
||
li.addEventListener('click', function () {
|
||
for (var i = 0; i < ol.children.length; i++) {
|
||
ol.children[i].className = '';
|
||
}
|
||
this.className = 'current'
|
||
// 点击 小圆圈，移动图片
|
||
// ul 移动的距离就是小圆圈的索引号 乘以图片的宽度，注意是 负值，往左走
|
||
var index = this.getAttribute('index') // 获取当前小 li 的索引号
|
||
|
||
// 同步思想
|
||
circle = num = index; // 当点击了某个li，就把小li的索引号给num和circle，这样可以解决不管是通过箭头还是小圆圈播放图片，都不会错序
|
||
|
||
animate(ul, -index * focusWidth);
|
||
|
||
})
|
||
}
|
||
// ol 第一个 li 类名设置为 current
|
||
ol.children[0].className = 'current';
|
||
|
||
// 克隆第一张图片，放在ul的最后面
|
||
var first = ul.children[0].cloneNode(true) // 深拷贝
|
||
ul.appendChild(first);
|
||
|
||
// 左右侧点击事件
|
||
var flag = true; // 节流阀
|
||
arrow_r.addEventListener('click', function () {
|
||
if (flag) {
|
||
// flag = false; //停用节流阀功能
|
||
if (num == ul.children.length - 1) {
|
||
ul.style.left = 0;
|
||
num = 0;
|
||
}
|
||
num++;
|
||
animate(ul, -focusWidth * num, function () {
|
||
flag = true; // 此次移动结束后放开节流阀
|
||
});
|
||
|
||
circle++;
|
||
// 如果走到最后克隆的图片，则重置 circle的值即可
|
||
if (circle == ol.children.length) {
|
||
circle = 0;
|
||
}
|
||
circleChange();
|
||
}
|
||
})
|
||
|
||
arrow_l.addEventListener('click', function () {
|
||
if (num == 0) {
|
||
num = ul.children.length - 1;
|
||
ul.style.left = -num * focusWidth + 'px';
|
||
}
|
||
num--;
|
||
animate(ul, -focusWidth * num);
|
||
|
||
circle--;
|
||
// 当 circle小于0时，讲circle值设置为最后一个
|
||
if (circle < 0) {
|
||
circle = ol.children.length - 1;
|
||
}
|
||
circleChange();
|
||
})
|
||
function circleChange() {
|
||
// 排他思想,清除所有的ol 下 li的current
|
||
for (var i = 0; i < ol.children.length; i++) {
|
||
ol.children[i].className = '';
|
||
}
|
||
ol.children[circle].className = 'current'; // 只保留当前的小 li 为current状态
|
||
}
|
||
|
||
var timer = setInterval(function () {
|
||
// 手动调用事件
|
||
arrow_r.click();
|
||
}, 5000)
|
||
|
||
|
||
var rettop = this.document.querySelector('.returntop'); // 侧边栏返回顶部模块
|
||
var recomment = this.document.querySelector('.recommend') // 推荐模块
|
||
//页面滚动事件
|
||
this.document.addEventListener('scroll', function () {
|
||
// console.log(window.pageYOffset); // 页面被卷曲的头部
|
||
// console.log(recomment.offsetTop);
|
||
if (window.pageYOffset >= recomment.offsetTop) {
|
||
rettop.style.display = 'block';
|
||
} else {
|
||
rettop.style.display = 'none';
|
||
}
|
||
})
|
||
|
||
// 返回顶部事件
|
||
rettop.addEventListener('click', function () {
|
||
// window.scroll(0, 0); // 瞬间返回
|
||
animateY(window, 0)
|
||
})
|
||
|
||
|
||
// 楼梯跳转
|
||
var guesslike = this.document.querySelector('.guesslike');
|
||
console.log(guesslike.offsetTop);
|
||
}) |