⼩⽶官⽹轮播图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] ies()) {
if (li === target) {//更改被点击的⼩圆点的样式，背景⾊为⽩⾊，这⾥通过添加hover类的⽅式实现 index = n;
target.className = "hover";
} else {//否则恢复为⼩圆点的默认样式，这⾥通过去除hover类的⽅式来实现
li.className = place("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();
js控制css3动画触发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] ies()) {
if (n === index) {//如果是第index个⼩圆点，则修改这个⼩圆点的背景颜⾊为⽩⾊
li.className = "hover";
} else {//其他⼩圆点恢复默认样式
li.className = place("hover", "");
}
}
}
setInterval(function () {//定时器，达到⾃动轮播的效果
index++;//循环++
if (index > 4) {//当循环到最后⼀个就再从第⼀个开始
index = 0;
}
setZero();//设置⼩圆点
setPicture();//设置图⽚
}, 3000);
</script>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论