小米官网轮播图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>
小米官网轮播图js+css3+html实现的更多相关文章
- 高仿阴阳师官网轮播图效果的jQuery插件
代码地址如下:http://www.demodashi.com/demo/12302.html 插件介绍 这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公开 ...
- 轮播图js版&jQ版
JS版轮播图 html部分和css部分自己任意定 主要构成: 1,一个固定的框 超出框的部分隐藏 2,几张图片float:left 3,下部下原点,点击切换,切换到不同的张都有红色显示 4,左右两个大 ...
- 轮播图--JS手写
轮播图基本每个网站都会有,也有很多的JQuery插件可以用,这里是用JS代码写的. @{ Layout = null; } <!DOCTYPE html> <html> < ...
- 轮播图--js课程
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 轮播图js编写
//面向对象 function Left() { this.index = 0; this.lefthover = $('#left-content'); this.listenhover(); th ...
- 转：大气炫酷焦点轮播图js特效
使用方法 Step 1. 在html的标签内引入相关文件 <script type="text/javascript" src="js/myfocus-2.0.0. ...
- banner轮播图js
例子1: if(!$('.side_ul ul').is(":animated")){ var wli = $('.side_ul li').width()+ ...
- 简单介绍无限轮播图，js源代码
无限轮播图js源代码,今天介绍一下用js简单的编写无限轮播图 <!DOCTYPE html> <html> <head> <meta charse ...
- App轮播图
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- Spring中的事件处理
文章目录 Spring中的事件处理 Spring 的核心是 ApplicationContext,它负责管理 beans 的完整生命周期.当加载 beans 时,ApplicationContext ...
- ERROR 1176 (42000): Key 'XXX' doesn't exist in table 'XXX'报错处理
MySQL5.7对sql语句强制使用索引查询时报错如下: 解决:这里的id字段是表的主键,查看别人的经验贴得知是语法错误,参考链接https://stackoverflow.com/questions ...
- 查漏补缺：进程间通信（IPC）：管道
管道是UNIX系统IPC的最古老形式,所有UNIX系统都提供此种通信机制.管道有以下两种局限性: (1)历史上,管道是半双工的(即数据只能在一个方向上流动). (2)管道只能在具有公共先祖的两个进程之 ...
- 用新架构适配MI3中遇到的各种坑
用新架构适配MI3中遇到的各种坑 首先不得不说hendy架构的强大之处, mi3也直接开机但是遇到各种坑,不能怪架构不够强大,只有说miui定制化太高.下面详细说一下mi3适配中的各种坑.有些坑会附带 ...
- Swift 进阶 第 4 课 集合类型协议
• Read 序列 一个序列 (sequence) 代表的是一系列具有相同类型 的值,你可以对这些值进行迭代.遍历一个序列最简单的方式是使用 for 循环: 123 for element in so ...
- “一亿”的教训：一次Google信箱诈骗是如何得手的？
网络诈骗是指以非法占有为目的,利用互联网采用虚构事实或者隐瞒真相的方法,骗取数额较大的公私财物的行为.一年比一年网络诈骗越来越高手段,可以说是日益猖獗.在这里提醒一次各位朋友一定要注意自己的网络安全. ...
- OpenGL的矩阵使用——绘制桌子
其中最左边的桌子循环上移(即匀速上移到一定位置后回到原点继续匀速上移),中间的桌子不断旋转(即绕自身中间轴旋转),最右边的桌子循环缩小(即不断缩小到一定大小后回归原来大小继续缩小). 桌子的模型尺寸如 ...
- tfgan折腾笔记（一）：核心功能简要概述
tfgan是什么? tfgan是tensorflow团队开发出的一个专门用于训练各种GAN的轻量级库,它是基于tensorflow开发的,所以兼容于tensorflow.在tensorflow1.x版 ...
- SpringBoot入门系列（三）资源文件属性配置
前面介绍了Spring的@Controller和@RestController控制器, 他们是如何响应客户端请求,如何返回json数据.不清楚的朋友可以看看之前的文章:https://www.cnbl ...
- 个人理解TCP中SYN Cookie
说起SYN Cookie还是得从TCP3次握手开始说起,先给出计网的体系结构图 然后解释一下SYN,seq,ack,ACK的相关名词 SYN(建立连接) ACK(确认后全部为1) PSH(传送) FI ...