1.重难点:
-
布局
-
图片与小圆点同步问题
-
setInterval定时器的使用
-
淡入淡出效果
-
左右箭头点击时,图片与小圆点的效果同步
2.思路:
-
最底下容器使用相对定位,图片、小圆点、箭头均使用绝对定位悬浮在底部容器上。图片的top和left均设置为0,即全部重叠在一个位置。但是只显示一张图片,即只有一张图片的display为block,其它图片隐藏,即display:none;
-
通过全局index索引记录点击的是第几个小圆点,默认为0,找到相对应的第index张图片,将这张图片显示,其他图片隐藏;
-
通过修改index使得图片和右下角小圆点同步;
-
通过js修改元素animation值,否则动画只会在初始化时显示一次;
-
点击左箭头是index- -,若index<0,则赋值为4;点击右箭头是index++,若index>0,则赋值为0,达到循环的效果;
-
设置最底部容器为固定大小,图片使用列表一行展示,列表的容器使用相对定位并设置为溢出隐藏(overflow:hidden),列表使用绝对定位,将列表的位置向左移或右移实现轮的效果。
3.代码:
CSS:
body {
margin: 0;
}
.banner {
width: 1000px;
height: 550px;
/* 面板使用相对定位,方便在其上面使用绝对定位添加元素 */
position: relative;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.banner ul li img {
width: 1000px;
height: 550px;
}
.banner .item {
position: absolute;
top: 0;
left: 0;
display: none;
opacity: 0;
}
.banner .item:first-child {
display: block;
opacity: 1;
}
/* 右下角小圆点切换 */
.zeroPoint {
position: absolute;
bottom: 20px;
right: 40px;
}
.zeroPoint li {
width: 8px;
height: 8px;
border: 2px solid #555;
border-radius: 50%;
background: #555;
display: inline-block;
margin-right: 5px;
}
.zeroPoint li:hover {
background: #fff;
cursor: pointer;
}
.zeroPoint li.hover {
background: #fff;
}
.arrow .leftArrow,
.arrow .rightArrow {
width: 200px;
height: 200px;
position: absolute;
top: 200px;
color: #fff;
cursor: pointer;
background-repeat: no-repeat;
}
.arrow .leftArrow {
left: 100px;
background: url('./img/left.png');
}
.arrow .rightArrow {
right: 100px;
background: url('./img/rigth.png');
}
/*定义图片切换动画样式*/
/*淡出*/
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
/*淡入*/
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
HTML:
<!-- 整个容器 -->
<div class="banner">
<!-- 图片容器 -->
<div class="img-wrap">
<ul>
<li class="item"><img src="./img/1.jpg" /></li>
<li class="item"><img src="./img/2.jpg" /></li>
<li class="item"><img src="./img/3.jpg" /></li>
<li class="item"><img src="./img/4.jpg" /></li>
<li class="item"><img src="./img/5.jpg" /></li>
</ul>
</div>
<!-- 右下角小圆点 -->
<ul class="zeroPoint">
<li class="hover"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<!-- 左右箭头容器 -->
<div class="arrow">
<div class="leftArrow"></div>
<div class="rightArrow"></div>
</div>
</div>
JS:
// 全局的index,图片和小圆点进行同步的关键
var index = 0;
// 获取所有图片
var imgLis = document.querySelectorAll('.img-wrap li');
// 获取小圆点的父元素ul
var zeroPoint = document.querySelector('.zeroPoint');
// 获取所有的小圆点
let lis = zeroPoint.querySelectorAll('li');
function setPicture() {
var len = imgLis.length;
// 遍历所有图片
for (let i = 0; i < len; i++) {
if (i == index) { //如果这个图片是第index个孩子,则让它显示,并设置淡入的动画效果
imgLis[i].style.display = 'block';
imgLis[i].style.animation = 'fadeIn 3s';
} else { //否则,隐藏,并设置淡出动画
imgLis[i].style.animation = 'fadeOut 0s';
imgLis[i].style.display = 'none';
}
}
}
function setZero() {
for (let [n, li] of lis.entries()) {
if (n == index) { //如果是第index个小圆点,则修改这个小圆点的背景颜色为白色
li.className = 'hover'
} else { //其他小圆点恢复默认样式
li.className = li.className.replace('hover', '')
}
}
}
// 小圆点点击监听事件
zeroPoint.addEventListener('click', function (event) {
let trarget = event.target;
console.log(trarget);
for (let [n, li] of lis.entries()) { //更改被点击的小圆点样式,背景色为白色,这里通过添加hover类的方式实现
if (li == target) {
index = n;
trarget.className = 'hover';
} else { //否则恢复为小圆点的默认样式,这里通过去除hover类的方式来实现
li.className = li.className.replace('hover', '');
}
}
setPicture(); //设置图片
})
// 定时器,达到自动轮播的效果
setInterval(function () {
index++;
if (index > 4) {
index = 0;
}
setPicture();
setZero();
}, 3000)
// 左箭头点击事件
var leftArrow = document.querySelector('.leftArrow')
leftArrow.addEventListener('click', function (event) {
index--;
if (index < 0) {
index = 4;
}
setPicture();
setZero();
})
// 右箭头点击事件
var rightArrow = document.querySelector('.rightArrow')
rightArrow.addEventListener('click', function (event) {
index++;
if (index > 4) {
index = 0;
}
setPicture();
setZero();
})