1.纯Css实现轮播效果

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        *{margin:0;padding:0;}

        #wrap{

            width:520px;height:280px;

            border:1px solid;overflow:hidden;

            position:absolute;top:100px;left:300px;

        }

        .box{

            width:2600px;height:280px;

              position:relative;

              z-index:9;

              left:0;

              cursor:pointer;

        }

        .box>li{float:left;}

        .pics_list{

            width:100%;height:8%;

            position:absolute;bottom:0px;

            background:#8B8878;opacity:0.8;filter:alpha(opacity:80);

            cursor:pointer;text-align:center;

            z-index:999;

        }

        .num{

            position:absolute;z-index:10;

            display:inline-block;

            right:10px;bottom:0px;

            border-radius:100%;

            background:#f00;

            width:25px;height:25px;

            line-height:25px;

            cursor:pointer;

            color:#fff;

            text-align:center;

            opacity:0.8;

            margin:0 10px;

        }

        .num:hover{background:#00f;}

        .num:nth-child(2){margin-right:40px}

        .num:nth-child(3){margin-right:80px}

        .num:nth-child(4){margin-right:120px}

        .num:nth-child(5){margin-right:160px}

        .num:hover,.box:hover{animation-play-state:paused;}  

        .play{

            animation: ma 10s ease-out infinite alternate;

        }  

        #a1:hover ~ .box{animation: ma1 .5s ease-out forwards;}

        #a2:hover ~ .box{animation: ma2 .5s ease-out forwards;}

        #a3:hover ~ .box{animation: ma3 .5s ease-out forwards;}

        #a4:hover ~ .box{animation: ma4 .5s ease-out forwards;}

        #a5:hover ~ .box{animation: ma5 .5s ease-out forwards;}

        @keyframes ma1 {0%{left:-1200px;}100%{left:-0px;} }

        @keyframes ma2 {0%{left:-1200px;}100%{left:-520px;}   }

        @keyframes ma3 {100%{left:-1040px;}   }

        @keyframes ma4 {100%{left:-1560px;}   }

        @keyframes ma5 {100%{left:-2120px;}  }  

        @keyframes ma {/*---每图片切换有两个阶段：位移切换和静置。中间的效果可以任意定制----*/

            0%,20% {        left: 0px;       }

            25%,40% {       left: -520px;    }

            45%,60% {       left: -1040px;    }

            65%,80% {       left: -1560px;    }

            85%,100% {      left: -2120px;   }

        }

    </style>

</head>

<body>

    <div id="wrap">

        <a class="num" id="a1"></a>

        <a class="num" id="a2"></a>

        <a class="num" id="a3"></a>

        <a class="num" id="a4"></a>

        <a class="num" id="a5"></a>

        <ul class="box play">

            <li><img src="img/2.jpg" alt="" /></li>

            <li><img src="img/1.jpg" alt="" /></li>

            <li><img src="img/3.jpg" alt="" /></li>

            <li><img src="img/4.jpg" alt="" /></li>

            <li><img src="img/5.jpg" alt="" /></li>

        </ul>

    </div>

</body>

</html>

各种轮播实现（纯css实现+js实现）的更多相关文章

  1. 纯css、js 的H5页面对接echarts

    做项目时,会遇到一些零碎的技术点.记录下来以防忘记 需求:做可视化界面,但是需要兼容ie8,需要用纯css.js 的H5页面对接echarts,下面为效果图(带定时器循环显示tooltip). 实现方 ...

  2. 纯js轮播图练习-2，js+css旋转木马层叠轮播

    基于css3的新属性,加上js的操作,让现在js轮播图花样越来越多. 而现在出现的旋转木马层叠轮播的轮播图样式,却是得到了很多人都喜爱和投入使用. 尤其是在各大软件中,频繁的出现在大家的眼里,在web ...

  3. 纯css和js版下拉菜单

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

  4. 纯CSS实现JS效果研究

    利用CSS3:checked选择器和~配合实现tab切换 效果: 代码: <style> body,div,input,label{ margin:0; padding:0; } #tab ...

  5. 纯css无js实现点击事件

    <input id="A" type="checkbox"><label for="A"> <span cla ...

  6. 纯js写图片轮播插件

    最近终于写成了自己创作的图片轮播插件,使用原生js编写.与目前网上流行的轮播插件相比,功能和效果稍弱,但是使用起来相当方便. 先看html代码 <!DOCTYPE html> <ht ...

  7. js原生轮播

    js原生轮播 今天用js做了轮播图,做的不怎么好,希望大家能够看懂. 效果: 1.鼠标放在轮播图上自动停止 2.鼠标离开轮播图自动播放 3.鼠标点击轮播图上的小圆点跳转到相应的图上. 代码: < ...

  8. 原生js实现简单轮播的淡入淡出效果

    实现这种淡入淡出的轮播关键在于css的一种设置  首先它不能像传统的轮播显示隐藏 或者左右浮动 他应该让其固定定位使其重叠在一起  达到这种效果  然后设置c3动画属性 transition:1s; ...

  9. 使用原生js将轮播图组件化

    代码地址如下:http://www.demodashi.com/demo/11316.html   这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explor ...

随机推荐

  1. Spring Boot实现跨域（转）

    一.方法: 服务端设置Respone Header头中Access-Control-Allow-Origin 配合前台使用jsonp 继承WebMvcConfigurerAdapter 添加配置类 二 ...

  2. 怎么让Excel显示时间时候能把秒显示出来

    Excel显示时间一般只显示年月日小时分钟怎么能够把秒也显示出来既如下显示 2007-04-11 12:00:00 将单元格格式设为"自定义",在"类型"框中输 ...

  3. Sql批量添加，批量查询，批量删除，批量修改。mybatis都有对应标签

    Sql批量添加,批量查询,批量删除,批量修改.mybatis都有对应标签

  4. 原想着mysql里放些文件什么的，查完资料还是算了

    三种东西永远不要放到数据库里 1.图片,文件,二进制数据,文件还是放入文件服务器吧或者分布式文件系统 2.短生命期数据 3.日志文件 mysql中一张表的数据是全部在一个数据文件中的.如果大字段的数据 ...

  5. CentOS 7最小安装后，手动连接网络

    时间:2015-12-12 00:53来源:blog.51cto.com 作者:XD 举报 点击:3679次 CentOS中最小安装,由于默认的网卡没有激活,所以无法连接到网络. 设置如下: sucd ...

  6. 打开与关闭Linux防火墙

    1) 重启后生效 开启: chkconfig iptables on 关闭: chkconfig iptables off 2) 即时生效,重启后失效 开启: service iptables sta ...

  7. 【bzoj4196】[Noi2015]软件包管理器

    裸的树链剖分. 对于安装 查询和维护到根路径 对于卸载 查询和维护子树信息 一开始线段树add[]标记要全赋值为-1 #include<algorithm> #include<ios ...

  8. 为什么要在css文件里定义 ul{margin:0;padding:0;}这个选择器？

    为什么要在css文件里定义 ul{margin:0;padding:0;}这个选择器? ul标签在FF中默认是有padding值的,而在IE中仅仅有margin默认有值.请看下面不同浏览中对paddi ...

  9. C语言8大经典排序算法（1）

    算法一直是编程的基础,而排序算法是学习算法的开始,排序也是数据处理的重要内容.所谓排序是指将一个无序列整理成按非递减顺序排列的有序序列.排列的方法有很多,根据待排序序列的规模以及对数据的处理的要求,可 ...

  10. linux下I2C驱动架构全面分析【转】

    本文转载自:http://blog.csdn.net/wangpengqi/article/details/17711165 I2C 概述 I2C是philips提出的外设总线. I2C只有两条线,一 ...