小米官网轮播图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> ...
随机推荐
- 产品需求说明书 PRD模版
XXX产品需求说明书 [版本号:V+数字] 编 制: 日 期: 评 审: 日 期: 批 准: 日 期: 修订记录 版本 修订章节 修订内容 ...
- oppo互联网招聘-各类软件测试
一.服务端测试专家 关键词:安全测试.白盒测试.性能测试.自动化.持续集成.服务端 岗位职责: 主导多个高日活产品的测试方案: 试点和推广自动化和持续集成: 改善测试相关流程和规范. 职位要求: 计算 ...
- 80 remove duplicates from sorted array 2
| 分类 leetcode | Follow up for "Remove Duplicates": What if duplicates are allowed at most ...
- IDEA系列（九）Intellij IDEA界面介绍 - 哲也的博客
原文出处:https://github.com/judasn/IntelliJ-IDEA-Tutorial 首次打开 重点说明: IntelliJ IDEA 是没有类似 Eclipse 的工作空间的概 ...
- 迈克尔·乔丹：几百年内AI不会觉醒
此乔丹非飞人乔丹.他是研究统计学和计算机科学家,目前研究的领域正是普通人所说的人工智能.权威的学术搜索引擎Semantic Scholar在2105年做了一项排名,关于计算机科学领域谁最具影响力 ...
- 为什么要用location的hash来传递参数?
分页功能代码实现 <div> <a class="btn" href="#" style="..." @Click.pre ...
- Design Patterns | 01 为什么要尽早掌握设计模式
标题:Design Patterns | 01 为什么要尽早掌握设计模式 链接: 标签:设计模式 摘要:设计模式是前人经验的总结,教大家如何写出可扩展.可读.可维护的高质量代码.设计模式与日常工作中的 ...
- TypeScript声明文件
为什么需要声明? 声明的本质是告知编译器一个标识符的类型信息.同时,在使用第三方库时,我们需要引用它的声明文件,才能获得对应的代码补全.接口提示等功能. 声明在TypeScript中至关重要,只有通过 ...
- win10 pycharm快捷键
编辑: 1.复制(行) ctrl + D (光标与需要复制的代码同行) 2.删除(行) ctrl + Y(光标与需要删除的代码同行) 3.光标换行 Shift + Enter(不管光标在该行的哪个位置 ...
- OpenCV读一张图片并显示
Java 版本: JavaCV 用OpenCV读一张图片并显示.只需将程序运行时的截图回复.如何安装配置创建项目编写OpenCV代码,可参考何东健课件和源代码或其他资源. package com.gi ...