小米官网轮播图js+css3+html实现
官网轮播：
我的轮播：
重难点：
1、布局
2、图片和右下角小圆点的同步问题
3、setInterval定时器的使用
4、淡入淡出动画效果
5、左右箭头点击时，图片和小圆点的效果同步
6、另一种轮播思维
解答：
1、最底下容器使用相对定位，图片、小圆点、箭头均使用绝对定位悬浮在底部容器上，图片均的top和left值均设置为0，即全部重叠在一个位置，但是只显示一张图片，即只有一张图片的display为block，其他图片隐藏，即display：none
2、通过全局index索引记录点击的是第几个小圆点，默认为0，找到相对应的第index张图片，将这张图片显示，其他图片隐藏
3、通过修改index使得图片和右下角小圆点同步
setInterval(function () {//定时器，达到自动轮播的效果
index++;//循环++
if (index > 4) {//当循环到最后一个就再从第一个开始
index = 0;
}
setZero();//设置小圆点
setPicture();//设置图片
}, 3000);
4、通过js修改元素的animation值，否则动画只会在初始化时显示一次
5、点击左箭头是index--，若index < 0 则赋值为4；击右箭头是index++，若index > 4 则赋值为0，达到循环的效果
6、设置最底部容器为固定大小，图片使用列表一行展示，列表的容器使用相对定位并设置为溢出隐藏（overflow：hidden）,列表使用绝对定位，将列表的位置向左移或向右移实现轮播的效果
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米轮播图</title>
<style>
body {
margin: 0;
}
#banner {
width: 1226px;
height: 460px;
background: aqua;
margin: 20px auto;
/*面板使用相对定位，方便在其上面使用绝对定位添加元素*/
position: relative;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#banner ul li img {
width: 1226px;
height: 460px;
}
#banner .item {
position: absolute;
top: 0;
display: none;
opacity: 0;
animation-timing-function: ease-in-out;
}
/*初始加载时，显示第一张图片*/
#banner .item:first-child {
display:block;
opacity: 1;
}
.arrow #leftArrow, .arrow #rightArrow {
width: 40px;
height: 69px;
position: absolute;
top: 195px;
}
.arrow #leftArrow {
left: 100px;
background-image: url("../images/xiaomi/icon-slides.png");
background-position: -83px 0;
background-repeat: no-repeat;
}
.arrow #rightArrow {
right: 100px;
background-image: url("../images/xiaomi/icon-slides.png");
background-position: -126px 0;
background-repeat: no-repeat;
}
/*右下角小圆点切换*/
.zeroPoint {
position: absolute;
bottom: 20px;
right: 40px;
}
.zeroPoint li {
width: 5px;
height: 5px;
border: 2px solid #555;
background: #555;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
.zeroPoint li:hover {
background: #fff;
}
.zeroPoint li.hover {
background: #fff;
}
/*定义图片切换动画样式*/
/*淡出*/
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@-webkit-keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
/*淡入*/
@keyframes fadeIn{
from{
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes fadeIn{
from{
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
</head>
<body>
<!--整个容器-->
<div id="banner">
<!--图片容器-->
<div class="img-wrap">
<ul>
<li class="item"><img src="../images/xiaomi/1.jpg" alt=""></li>
<li class="item"><img src="../images/xiaomi/2.jpg" alt=""></li>
<li class="item"><img src="../images/xiaomi/3.jpg" alt=""></li>
<li class="item"><img src="../images/xiaomi/4.jpg" alt=""></li>
<li class="item"><img src="../images/xiaomi/5.jpg" alt=""></li>
</ul>
</div>
<!--左右箭头容器-->
<div class="arrow">
<div id="leftArrow"></div>
<div id="rightArrow"></div>
</div>
<!--右下角小圆点-->
<ul class="zeroPoint">
<li class="hover"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
<script>
<!--这个index是图片和小圆点进行同步的关键-->
var index = 0;
//获取小圆点的父元素ul
var zeroPoint = document.querySelector(".zeroPoint");
//获取所有图片
var imgLis = document.querySelectorAll(".img-wrap li");
//获取所有的小圆点
let lis = zeroPoint.querySelectorAll("li");
//小圆点点击事件监听
zeroPoint.addEventListener("click", function (event) {
let target = event.target;
for (let [n, li] of lis.entries()) {
if (li === target) {//更改被点击的小圆点的样式，背景色为白色，这里通过添加hover类的方式实现
index = n;
target.className = "hover";
} else {//否则恢复为小圆点的默认样式，这里通过去除hover类的方式来实现
li.className = li.className.replace("hover", "");
}
}
setPicture();//设置图片
});
//左箭头点击事件
var leftArrow = document.querySelector("#leftArrow");
leftArrow.addEventListener("click", function (event) {
index--;//点击左箭头时，index--
if (index < 0) {//若index < 0 则赋值为4，达到循环的效果
index = 4;
}
setZero();//设置小圆点
setPicture();//设置图片
});
//右箭头点击事件
var rightArrow = document.querySelector("#rightArrow");
rightArrow.addEventListener("click", function (event) {
index++;
if (index > 4) {
index = 0;
}
setZero();
setPicture();
});
function setPicture() {
//遍历所有图片
for (let i = 0, length = imgLis.length; i < length; 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", "");
}
}
}
setInterval(function () {//定时器，达到自动轮播的效果
index++;//循环++
if (index > 4) {//当循环到最后一个就再从第一个开始
index = 0;
}
setZero();//设置小圆点
setPicture();//设置图片
}, 3000);
</script>