官网轮播：

我的轮播：

重难点：

　　1、布局

　　2、图片和右下角小圆点的同步问题

　　3、setInterval定时器的使用

　　4、淡入淡出动画效果

　　5、左右箭头点击时，图片和小圆点的效果同步

　　6、另一种轮播思维

解答：

　　1、最底下容器使用相对定位，图片、小圆点、箭头均使用绝对定位悬浮在底部容器上，图片均的top和left值均设置为0，即全部重叠在一个位置，但是只显示一张图片，即只有一张图片的display为block，其他图片隐藏，即display：none

　　2、通过全局index索引记录点击的是第几个小圆点，默认为0，找到相对应的第index张图片，将这张图片显示，其他图片隐藏

　　3、通过修改index使得图片和右下角小圆点同步

  1. 　　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）,列表使用绝对定位，将列表的位置向左移或向右移实现轮播的效果

源码：

  1. <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>小米轮播图</title>
        <style>
            body {
                margin: 0;
            }
  2.  
  3.         #banner {
                width: 1226px;
                height: 460px;
                background: aqua;
                margin: 20px auto;
                /*面板使用相对定位，方便在其上面使用绝对定位添加元素*/
                position: relative;
            }
  4.  
  5.         ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
            }
  6.  
  7.         #banner ul li img {
                width: 1226px;
                height: 460px;
            }
  8.  
  9.         #banner .item {
                position: absolute;
                top: 0;
                display: none;
                opacity: 0;
                animation-timing-function: ease-in-out;
            }
            /*初始加载时，显示第一张图片*/
            #banner .item:first-child {
                display:block;
                opacity: 1;
            }
  10.  
  11.         .arrow #leftArrow, .arrow #rightArrow {
                width: 40px;
                height: 69px;
                position: absolute;
                top: 195px;
            }
  12.  
  13.         .arrow #leftArrow {
                left: 100px;
                background-image: url("../images/xiaomi/icon-slides.png");
                background-position: -83px 0;
                background-repeat: no-repeat;
            }
  14.  
  15.         .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;
            }
  16.  
  17.         .zeroPoint li {
                width: 5px;
                height: 5px;
                border: 2px solid #555;
                background: #555;
                border-radius: 50%;
                display: inline-block;
                margin-right: 5px;
            }
  18.  
  19.         .zeroPoint li:hover {
                background: #fff;
            }
  20.  
  21.         .zeroPoint li.hover {
                background: #fff;
            }
  22.  
  23.         /*定义图片切换动画样式*/
            /*淡出*/
            @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>
  24.  
  25. </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();
        });
  26.  
  27.     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"
                }
            }
        }
  28.  
  29.     function setZero() {
            for (let [n, li] of lis.entries()) {
                if (n === index) {//如果是第index个小圆点，则修改这个小圆点的背景颜色为白色
                    li.className = "hover";
                } else {//其他小圆点恢复默认样式
                    li.className = li.className.replace("hover", "");
                }
            }
        }
  30.  
  31.     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. /lib64/libc.so.6: version `GLIBC_2.18' not found报错解决

    今日安装一区块链服务时报错:/lib64/libc.so.6: version `GLIBC_2.18' not found,检查后现有的glibc版本是2.17,然后参考https://www.ji ...

  2. 三星HTC价格跳水 安卓旗舰会否崩塌？

    安卓旗舰会否崩塌?" title="三星HTC价格跳水 安卓旗舰会否崩塌?"> 官方降价,对于国产手机来说似乎是家常便饭.小米.魅族等,总会时隔几个月就将自家旗舰机 ...

  3. Spring Boot 2.x基础教程：使用 Thymeleaf开发Web页面

    通过本系列教程的前几章内容(API开发.数据访问).我们已经具备完成一个涵盖数据存储.提供HTTP接口的完整后端服务了.依托这些技能,我们已经可以配合前端开发人员,一起来完成一些前后端分离的Web项目 ...

  4. Web Scraper 高级用法——抓取属性信息 | 简易数据分析 16

    这是简易数据分析系列的第 16 篇文章. 这期课程我们讲一个用的较少的 Web Scraper 功能--抓取属性信息. 网页在展示信息的时候,除了我们看到的内容,其实还有很多隐藏的信息.我们拿豆瓣电影 ...

  5. 攻防世界Mobile6 app1 XCTF详解

    XCTF_app1 先安装看看 点击芝麻开门之后会弹出“年轻人不要耍小聪明噢” 这大概就能看懂是点击之后进行判断,那就直接去看JEB,看看判断条件是什么 V1是输入的字符串,V2获取包信息(百度的), ...

  6. JDBC阶段总结

    一.JDBC的概念:Java DataBase Connectivity用Java语言操作数据库(通过SQL)二.数据库的驱动和JDBC的关系三.编写JDBC的步骤: a.注册驱动 b.建立与数据库的 ...

  7. RTMP协议推流交互流程

    目录 RTMP协议推流交互流程 RTMP协议推流流程 RTMP握手 RTMP建立连接 RTMP建流&Play Wireshark抓个RTMP流 RTMP协议推流交互流程 想了解下直播常见协议R ...

  8. 《第31天：JQuery - 轮播图》

    源码下载地址:链接:https://pan.baidu.com/s/16K9I... 提取码:0ua2 写这篇文章,当做是对自已这一天的一个总结.写轮播图要准备的东西:三张尺寸大小一样的图片.分为三个 ...

  9. 逐行分析jQuery2.0.3源码-完整笔记

    概览 (function (){ (21 , 94) 定义了一些变量和函数 jQuery=function(); (96 , 293) 给jQuery对象添加一些方法和属性; (285 , 347) ...

  10. XML学习笔记--背诵版

    前言 一直想系统性的学XML,就没时间学,今晚抽出几个小时时间学完了XML.过几天再过来看看,背一背应该就差不多,记得东西较多,没什么难理解的. XML数据传输格式 第一章 XML概述 1.1 引入 ...