243 lines
7.4 KiB
HTML
243 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
<link rel="stylesheet" href="./css/common.css">
|
|
<style>
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.box {
|
|
position: relative;
|
|
width: 840px;
|
|
height: 525px;
|
|
margin: 100px auto;
|
|
overflow: hidden;
|
|
}
|
|
|
|
ul,
|
|
ol,
|
|
li {
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
ul {
|
|
position: absolute;
|
|
}
|
|
|
|
ul li {
|
|
float: left;
|
|
width: 840px;
|
|
height: 525px;
|
|
}
|
|
|
|
ul img {
|
|
display: block;
|
|
width: 840px;
|
|
height: 525px;
|
|
}
|
|
|
|
ol {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 20px;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
ol li {
|
|
|
|
float: left;
|
|
width: 15px;
|
|
height: 15px;
|
|
background-color: #fff;
|
|
border: 2px solid #ccc;
|
|
margin: 0 5px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.active {
|
|
background-color: greenyellow;
|
|
}
|
|
|
|
.left,
|
|
.right {
|
|
display: none;
|
|
position: absolute;
|
|
width: 30px;
|
|
height: 60px;
|
|
line-height: 60px;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
color: greenyellow;
|
|
background-color: rgba(129, 92, 148, 0.5);
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.right {
|
|
right: 0;
|
|
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- 搭建结构 -->
|
|
<div class="box">
|
|
<ul>
|
|
<li><img src="./images/1.jpg" alt=""></li>
|
|
</ul>
|
|
<ol></ol>
|
|
<span class="left iconfont"></span>
|
|
<span class="right iconfont"></span>
|
|
</div>
|
|
<script src="./js/animate.js"></script>
|
|
<script>
|
|
// 1.获取元素
|
|
let box = document.querySelector('.box');
|
|
let ul = document.querySelector('ul');
|
|
let ol = document.querySelector('ol');
|
|
let left = document.querySelector('.left');
|
|
let right = document.querySelector('.right');
|
|
let flag = true; // 假设动画已经执行完成了
|
|
// 创建计数器
|
|
let num = 0;
|
|
// 将第一张图片克隆放到后面
|
|
ul.appendChild(ul.children[0].cloneNode(true));
|
|
// 计算ul的宽度
|
|
ul.style.width = ul.children.length * 840 + 'px';
|
|
|
|
// 更具图片的数量来创建小圆点
|
|
for (let i = 0; i < ul.children.length - 1; i++) {
|
|
// 创建节点
|
|
let li = document.createElement('li');
|
|
// 给每个li添加自定属性
|
|
li.dataset['index'] = i;
|
|
// 将节点添加到ol里面
|
|
ol.appendChild(li);
|
|
// 绑定事件
|
|
li.onclick = function () {
|
|
// 清除其他小圆点的类名
|
|
for (let i = 0; i < ol.children.length; i++) {
|
|
ol.children[i].classList.remove('active');
|
|
}
|
|
// 给被点击的元素添加类名
|
|
this.classList.add('active');
|
|
// 让ul移动到对应的位置
|
|
num = this.dataset['index'];
|
|
animate(ul, {
|
|
left: -num * box.offsetWidth
|
|
});
|
|
console.log(box.offsetWidth)
|
|
}
|
|
}
|
|
|
|
// 默认给第一个小圆点添加样式
|
|
ol.children[0].classList.add('active');
|
|
|
|
// 给右箭头添加事件
|
|
right.addEventListener('click', () => {
|
|
if (flag) {
|
|
flag = false;
|
|
// 判断是不是在最后一个元素
|
|
if (num == ul.children.length - 1) {
|
|
num = 0;
|
|
// 如果在最后一个元素,瞬间回到第一个元素
|
|
// 实现无缝切换
|
|
ul.style.left = 0;
|
|
}
|
|
num++;
|
|
// 为了防止被多次点击速度越来越快,我们需要判断段动画是否完成了
|
|
animate(ul, {
|
|
left: -num * box.offsetWidth
|
|
},() => {
|
|
// 当动画执行完成后,执行回调函数
|
|
// 让flag变为true
|
|
flag = true;
|
|
})
|
|
// 让小圆点跟着图片走
|
|
for (let i = 0; i < ol.children.length; i++) {
|
|
ol.children[i].classList.remove('active');
|
|
}
|
|
// 给对应的小圆点添加上样式
|
|
// 应为我们做了无缝切换,只有五个小圆点,实际上有六张图片,我们还需要判断一下
|
|
if (num == ul.children.length - 1) {
|
|
ol.children[0].classList.add('active');
|
|
} else {
|
|
ol.children[num].classList.add('active');
|
|
}
|
|
}
|
|
|
|
})
|
|
|
|
// 给左箭头添加事件
|
|
left.addEventListener('click', () => {
|
|
if (flag) {
|
|
flag = false;
|
|
// 判断是不是第一个元素
|
|
if (num == 0) {
|
|
num = ul.children.length - 1;
|
|
// 如果是第一个元素,我们瞬间切换到最后一个元素
|
|
// 应为第一个元素和最后一个元素是一样的,所以可以实现
|
|
// 无缝切换
|
|
ul.style.left = -num * box.offsetWidth + 'px';
|
|
}
|
|
num--;
|
|
// 为了防止被多次点击速度越来越快,我们需要判断段动画是否完成了
|
|
animate(ul, {
|
|
left: -num * box.offsetWidth
|
|
},() => {
|
|
// 当动画执行完成后,执行回调函数
|
|
// 让flag变为true
|
|
flag = true;
|
|
})
|
|
// 让小圆点跟着图片走
|
|
for (let i = 0; i < ol.children.length; i++) {
|
|
ol.children[i].classList.remove('active');
|
|
}
|
|
// 给对应的小圆点添加上样式
|
|
// 应为我们做了无缝切换,只有五个小圆点,实际上有六张图片,我们还需要判断一下
|
|
if (num == ul.children.length - 1) {
|
|
ol.children[0].classList.add('active');
|
|
} else {
|
|
ol.children[num].classList.add('active');
|
|
}
|
|
}
|
|
|
|
})
|
|
|
|
// 让轮播图自动轮播
|
|
let timer = setInterval(function() {
|
|
right.click();
|
|
},2000)
|
|
|
|
// 鼠标移入,显示箭头,并且停止轮播
|
|
box.addEventListener('mouseenter',()=> {
|
|
right.style.display = 'block';
|
|
left.style.display = 'block';
|
|
// 清除定时器
|
|
clearInterval(timer);
|
|
})
|
|
// 鼠标移出,继续轮播
|
|
box.addEventListener('mouseleave',() => {
|
|
// 隐藏按钮
|
|
right.style.display = 'none';
|
|
left.style.display = 'none';
|
|
timer = setInterval(function() {
|
|
right.click();
|
|
},2000)
|
|
})
|
|
</script>
|
|
</body>
|
|
|
|
</html> |