实现轮播图感觉好复杂啊，这个比较简单的实现了

但是还是没有怎么理解代码，只能先发出来慢慢学习学习了

话不多说，直接上代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .banner-box{

    height: 327px;

    width: 600px;

    overflow: hidden;

    /* 超出该标签的长高部分会被隐藏 */

}

.slide-box{

    height: 327px;

    width: 3000px;/*因为每张图的宽度是1920px，所以这里是1920px*5 的大小*/

    /* 动画属性 */

    /* animation:自定义关键帧 过度时间 过度效果 循环次数； */

    animation:aaa 10s ease-out infinite;

}

.slide-box img{

    float: left;

    width: 600px;

    height: 327px;

}

@keyframes aaa{/*因为是五张图，所以分为5份，如果是4张就分为4份*/

    0%,19%{

        margin-left: 0;

    }

    20%,39%{

        margin-left: -600px;

    }

    40%,59%{

        margin-left: -1200px;

    }

    60%,79%{

        margin-left: -1800px;

    }

    80%,100%{

        margin-left: -2400px;

    }

}

    </style>

</head>

<body>

    <div class="banner-box">

        <div class="slide-box">

            <img src="521.jpg">

            <img src="520.jpg">

            <img src="521.jpg">

            <img src="520.jpg">

            <img src="521.jpg">

        </div>

    </div>

</body>

</html>

效果图如下所示：

轮播图会自动轮播设置的图片。完毕。好好学习！！！

html+css简单易懂的轮播图实现的更多相关文章

  1. 用 CSS 做轮播图

    对于用 css 实现一个轮播图的缘由,是那时候刚开始接触前端,完全还不懂 js.但是有一个项目(就是一个用来应付面试的作品)需要做一个轮播的效果,当时第一反应就是用 css3 自定义动画 -webki ...

  2. 基于css制作轮播图的部分效果

    在轮播图中,我们可以通过鼠标在特定位置上的滑动来实现元素背景的改变.通常在制作轮播图时,我们首先想到的是js中的交互.可是,如果我们无法使用js,只能单纯的靠css又该如何实现这一效果呢?下面,本人将 ...

  3. 纯CSS实现轮播图效果，你不知道的CSS3黑科技

    前言 轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...

  4. 拓展-教你手把手用纯CSS写轮播图

    先看成品图[示例网址:][1] [1]: https://huruji.github.io/css-imitate-js/slider/index.html一.随便说几句####css3动画效果的强大 ...

  5. 使用css实现轮播图

    使用css3实现图片轮播 前言:实现图片轮播的方式有很多种 ,例如js ,css 等等. 本文主要讲述使用纯css3实现轮播图 工具介绍: 使用的编辑器: Hbuilder 进入正题 html代码: ...

  6. 使用css制作轮播图

    <!--HTML代码--> <!DOCTYPE html> <html lang="en"><head> <meta char ...

  7. 纯css实现轮播图

    轮播图的实现原理其实是比较简单的 举个例子 <div class="main"> <div class="div-main"></ ...

  8. 用html +js+css 实现页面轮播图效果

    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...

  9. css3 - 纯css实现一个轮播图

    这是我上一次的面试题.一晃两个月过去了. 从前都是拿原理骗人,把怎么实现的思路说出来. 我今天又被人问到了,才想起来真正码出来.码出来效果说明一切: 以上gif,只用到了5张图片,一个html+css ...

  10. CSS3,3D效果轮播图

    ---恢复内容开始--- 大家还记得我昨天的3D拖拽立方体吗??我昨天还说过css还可以做轮播图,所以咱们今天就写一下,css的轮播图吧! ....这个轮播图主要是用CSS3里的transform的旋 ...

随机推荐

  1. java注解与反射--2

    java注解与反射--2 反射:java.Reflection 因为反射,使java具有了一定的动态性. java反射机制概述 动态语言: 是一类在运行时可以改变其结构的语言:例如新的函数.对象.甚至 ...

  2. 【开源项目】合肥~超经典智慧城市CIM/BIM数字孪生可视化项目—开源工程及源码

    最新消息,数字孪生智慧宁波开源了其数据工程源码和工程,免费送出供大家学习.使用.分享. ​ 智慧宁波实现了一系列全面的功能,如实现长三角经济圈特效.智慧地铁特效.智慧灯杆特性等.这些项目利用数字孪生技 ...

  3. InnoDB 是如何解决幻读的

    前言 大部分人在日常的业务开发中,其实很少去关注数据库的事务相关问题,基本上都是 CURD 一把梭.正好最近在看 MySQL 的相关基础知识,其中对于幻读问题之前一直没有理解深刻,今天就来聊聊「Inn ...

  4. R语言包和中文乱码解决方案

    常用R语言包 --数据处理:lubridata ,plyr ,reshape2,stringr,formatR,mcmc: --机器学习:nnet,rpart,tree,party,lars,boos ...

  5. python进程之进程池、线程池与异步回调机制

    进程线程不可以无限制的创建,因为有硬件的限制.为了避免资源被程序消耗过度,可以使用进程池或线程池的技术. 池     降低程序的执行效率,但是保证了计算机硬件的安全 进程池     提前创建好固定数量 ...

  6. python 启动外部程序四种方法

    在Python中,可以方便地使用os模块来运行其他脚本或者程序,这样就可以在脚本中直接使用其他脚本或程序提供的功能,而不必再次编写实现该功能的代码.为了更好地控制运行的进程,可以使用win32proc ...

  7. [Linux]CentOS查看RPM包依赖问题

    [经典应用案例] 查看此文前,可先查看 此博文中:在安装软件过程中,如何解决的依赖组件问题? [数据库/Linux]CentOS7安装MySQL Percona版(RPM方式) : 2-1 依赖组件问 ...

  8. [数据结构]二叉搜索树(BST) VS 平衡二叉排序树(AVL) VS B树(平衡多路搜索树) VS B+树 VS 红黑树(平衡二叉B树)

    1 二叉排序树/二叉查找树/Binary Sort Tree 1种对排序和查找都很有用的特殊二叉树 叉排序树的弊端的解决方案:平衡二叉树 二叉排序树必须满足的3条性质(或是具有如下特征的二叉树) 若它 ...

  9. vue表单绑定v-model

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

  10. ES6教程笔记

    ES介绍 什么是ES ES全称 EcmaScript 是一种脚本语言的规范 Javascript为ES的实现 Ecma 是一个组织 Ecma组织 为什么要学习ES6? ES6的版本变动内容最多,具有里 ...