轮播图的实现原理其实是比较简单的

举个例子

<div  class="main">

<div class="div-main"></div>

</div>

main的宽度是100px

div-main的宽度是500px

我们用js控制div-main往左或往右移动，这样就实现了轮播，简单把

好了，先介绍个 css3的api

animation: myfirst 5s linear 2s infinite alternate;

myfirst：动画名

5s：动画多久执行完

linear：动画以什么曲线执行

2s：动画延迟多长时间执行

infinite：该参数是动画一直循环，可以写数字也行

alternate：只动画在倒过来执行

先介绍到这里，完整用法可以参考：css3动画api参考

下面上代码：

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>RunJS</title>

    </head>

    <body>

        <div id="frame" >

    <div id="photos" class="play">

        <div class="img"></div>

        <div class="img"></div>

        <div class="img"></div>

        <div class="img"></div>

        <ul id="dis">

            <li>111111111111111</li>

            <li>22222222222222</li>

            <li>33333333333333</li>

            <li>44444444444444</li>

        </ul>

    </div>

</div>

    </body>

</html>
   #frame{position:absolute;width:302px;height:200px;overflow:hidden;border-radius:5px}

    #dis{position:absolute;left:-50px;top:-10px;opacity:.5}

    #dis li{display:inline-block;width:200px;height:20px;margin:0 50px;float:left;text-align:center;color:#fff;border-radius:10px;background:#000}

    #photos .img{float:left;width:300px;height:200px;background-color:red;border-left:1px solid blue;}

    #photos {  position: absolute;z-index:;  width: calc(301px * 4);/*---修改图片数量的话需要修改下面的动画参数*/  }

    .play{ animation: ma 5s ease-out infinite alternate;}

    @keyframes ma {

        0%,25% {        margin-left: 0px;       }

        30%,50% {       margin-left: -300px;    }

        55%,75% {       margin-left: -600px;    }

        80%,100% {       margin-left: -900px;    }

    }

正所谓什么代码也比不上一个   在线运行demo

纯css实现轮播图的更多相关文章

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

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

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

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

  3. 使用css实现轮播图

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

  4. 纯CSS焦点轮播效果-功能可扩展

    个人博客: http://mcchen.club 纯CSS3实现模拟焦点轮播效果,支持JQ等扩展各项功能.废话少说,直接贴代码. <!DOCTYPE html> <html> ...

  5. 纯 CSS 实现滑动轮播图效果

    只使用css实现轮播图简单的操作 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  6. 用 CSS 做轮播图

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

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

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

  8. 纯CSS3实现轮播图

    前言 纯css3实现的轮播图效果,和JavaScript控制的相比,简单高效了很多,但是功能也更加单一,只有轮播不能手动切换. 用什么实现的呢?页面布局 + animation动画 HTML部分 &l ...

  9. 使用css制作轮播图

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

随机推荐

  1. copy-on-write学习

    最近知识梳理不够,那就整理点以前blog的东西.这儿就看COW(copy-on-write),cow技术主要是为了提高程序在单步操作时的系统响应速度而设计的,它通过将不是立即必要的空间分配,数据复制等 ...

  2. 在阿里云ECS（CentOS6.5）上安装ftp

    安装vsftpd 命令: yum install vsftpd –y 结果: 创建ftp存取文件的目录,用户名,密码 命令: useradd -d /home/ftp -g ftp -s /sbin/ ...

  3. coreGraphs和动画

    http://www.jianshu.com/p/b71c3d450e8e http://blog.csdn.net/volcan1987/article/details/9969455 http:/ ...

  4. 【iScroll源码学习01】准备阶段 - 叶小钗

    [iScroll源码学习01]准备阶段 - 叶小钗 时间 2013-12-29 18:41:00 博客园-原创精华区 原文  http://www.cnblogs.com/yexiaochai/p/3 ...

  5. ucos内存管理原理详解

    应用程序中为了某种特殊需要,经常需要动态的分配内存,而操作系统的特质置一,就是能不能保证动态内存分配的时效性,也就是说分配时间是可确定的 Ucos提供内存分配功能,它将内存空间分为两级管理,将一块连续 ...

  6. NRF24L01无线通讯模块驱动

    NRF24L01 无线模块,采用的芯片是 NRF24L01,该芯片的主要特点如下: )2.4G 全球开放的 ISM 频段,免许可证使用. )最高工作速率 2Mbps,高校的 GFSK 调制,抗干扰能力 ...

  7. linux内核——1.概述

    1.结构 linux中,我们把操作系统分为内核空间和用户空间.用户通过用户空间与操作系统打交道.用户要通过系统调用访问内核空间.下图为Linux体系结构,shell应该为在最顶层. 系统调用,下面链接 ...

  8. bzoj3289

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=3289 题目大意:Mato同学从各路神犇以各种方式(你们懂的)收集了许多资料,这些资料一共有n ...

  9. 虔诚的墓主人（bzoj 1227）

    Description 小W 是一片新造公墓的管理人.公墓可以看成一块N×M 的矩形,矩形的每个格点,要么种着一棵常青树,要么是一块还没有归属的墓地.当地的居民都是非常虔诚的基督徒,他们愿意提前为自己 ...

  10. 为什么32位操作系统最大支持4GB内存

    因为32位操作系统的地址空间为32位,地址总数为2^32,每个地址对应1Byte内存空间,这样,32位操作系统管理的最大内存空间限制为2^32Byte=4*1024*1024*1024Byte,即4G ...