添加html内容
This commit is contained in:
duan
parent
c8f7016f8d
commit
942f93a77c
|
|
@ -0,0 +1,243 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,247 @@
|
|||
<!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>
|
||||
<li><img src="./images/2.jpg" alt=""></li>
|
||||
<li><img src="./images/3.jpg" alt=""></li>
|
||||
<li><img src="./images/4.jpg" alt=""></li>
|
||||
<li><img src="./images/5.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>
|
||||
Loading…
Reference in New Issue