html小米官网轮播图js,小米官网轮播图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),列表使用绝对定位，将列表的位置向左移或向右移实现轮播的效果

源码：

小米轮播图

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;

}

}

• 
• 
• 
• 
• 

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);

原文出处：https://www.cnblogs.com/MrZWJ/p/11115050.html