官网轮播：

我的轮播：

重难点：

　　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实现的更多相关文章

  1. 高仿阴阳师官网轮播图效果的jQuery插件

    代码地址如下:http://www.demodashi.com/demo/12302.html 插件介绍 这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公开 ...

  2. 轮播图js版&jQ版

    JS版轮播图 html部分和css部分自己任意定 主要构成: 1,一个固定的框 超出框的部分隐藏 2,几张图片float:left 3,下部下原点,点击切换,切换到不同的张都有红色显示 4,左右两个大 ...

  3. 轮播图--JS手写

    轮播图基本每个网站都会有,也有很多的JQuery插件可以用,这里是用JS代码写的. @{ Layout = null; } <!DOCTYPE html> <html> < ...

  4. 轮播图--js课程

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 轮播图js编写

    //面向对象 function Left() { this.index = 0; this.lefthover = $('#left-content'); this.listenhover(); th ...

  6. 转：大气炫酷焦点轮播图js特效

    使用方法 Step 1. 在html的标签内引入相关文件 <script type="text/javascript" src="js/myfocus-2.0.0. ...

  7. banner轮播图js

    例子1: if(!$('.side_ul ul').is(":animated")){            var wli = $('.side_ul li').width()+ ...

  8. 简单介绍无限轮播图，js源代码

    无限轮播图js源代码,今天介绍一下用js简单的编写无限轮播图 <!DOCTYPE html> <html>   <head>     <meta charse ...

  9. App轮播图

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. 扎心！来自互联网er的2019年度总结，看完笑着流泪……

    转眼2019年已经接近尾声,又到了年度总结的时候了.过去一年,你加了多少班,熬了多少夜,回想起来历历在目.互联网人2019年度总结,看完扎心了-- 01 - 这一年里 你一共提了275个需求 其中27 ...

  2. 查漏补缺：QObject类介绍

    QObject是Qt对象模型的中心.这个模型的核心特征就是一种用于无缝对象间通信的被叫做信号和槽的非常强大的机制,可以使用connect()把信号和槽连接起来,也可以通过disconnect()来破坏 ...

  3. Jackie's blog

    介绍使用winmm.h进行音频流的获取   首先需要包含以下引用对象 #include <Windows.h>#include "mmsystem.h"#pragma ...

  4. vagrant 虚拟机配置最佳实践

    Mac VirtualBox Vagrant 管理虚拟机 这篇文章定位是在理解了 vagrant 相关概念之后,教你如何灵活玩转自己的虚拟机配置 本文为 @favoorr 常用的 Mac Virtua ...

  5. 基于Blazor写一个简单的五子棋游戏

    写这个五子棋游戏,其实主要目的是想尝试一下微软新作Blazor.Blazor对于那些搞.NET的程序员,又想做一些前端工作,真的挺友好,不用一句JS就可搞定前端交互,美哉.现在已经有很流行的前端框架, ...

  6. Apple App签名机制

    概览 数字签名 签名机制与验证过程 操作流程 数字签名 摘要算法 将任意长度文本通过一个算法得到一个固定长度的文本. 源文本不同,计算结果必然不同 无法从结果反推源 例如,MD5和SHA算法 非对称加 ...

  7. Java常见的类——Number和Math类

    但我们使用数据时,我们一般使用内置数据类型,列如:byte,int,long,double等,但是在实际开发过程中,我们一般遇到的是需要使用对象,这时,我们就可以使用 Java 专门为每一个数据类型提 ...

  8. Py基础之函数

    '''函数是指一类同类事物的抽象,而且这种抽象可以拓展,并且可以用在同一类事物上'''print (abs(-100),abs(100)) #abs函数是python内置的函数,可以用来求绝对值#pr ...

  9. 关于IT培训机构的个人看法

    1.前言 缘分与巧合,最近接触比较多的培训机构出来的人,以及看过关于培训机构的文章和问答.虽然没在培训机构上过课,但是接触过很多培训机构出来的人,也看过一些培训机构的课程.关于培训机构,我也有自己的看 ...

  10. 适合MCU用的C语言快速互转HEX（16进制）和原始字符串/数组方法

    缘由 这个起因是昨晚群里有人在讨论怎么把字符串转成HEX方法最佳,讨论到最后变成哪种方法效率最优了.毕竟这代码是要在MCU上面跑的,要同时考虑到时间和空间的最优解. 当然讨论的是有结果的,具体实现的方 ...