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. 使用XML定义组件样式

    <TextView android:layout_width="match_parent" android:layout_height="wrap_content& ...

  2. 解决json_encode中文乱码

    在使用json_encode之前把字符用函数urlencode()处理一下,然后再json_encode,输出结果的时候在用函数urldecode()转回来

  3. C#高级编程第9版 第一章 .NET体系结构 读后笔记

    .NET的CLR把源代码编译为IL,然后又把IL编译为平台专用代码. IL总是即时编译的,这一点的理解上虽然明白.当用户操作C#开发的软件时,应该是操作已经编译好的程序.那么此时安装在客户机上的程序是 ...

  4. DELPHI、FLASH、AS3、FLEX使用Protobuf（google Protocol Buffers）的具体方法

    最近因为工作需要,需要在不同的开发环境中应用Protobuf,特此,我专门研究了一下.为了防止自己忘记这些事情,现在记录在这里!需要的朋友可以借鉴一些,因为这些东西在GOOGLE和百度上搜索起来真的很 ...

  5. SSD硬盘安装系统后要做的事

    1***cmd>fsutil behavior query DisableDeleteNotify 0如果返回值是0,则代表TRIM处于开启状态:反之如果返回值是1,则代表TRIM处于关闭状态2 ...

  6. （6）文本挖掘（三）——文本特征TFIDF权重计算及文本向量空间VSM表示

    建立文本数据数学描写叙述的过程分为三个步骤:文本预处理.建立向量空间模型和优化文本向量. 文本预处理主要採用分词.停用词过滤等技术将原始的文本字符串转化为词条串或者特点的符号串.文本预处理之后,每个文 ...

  7. pageContext 获取Session 为null原因

    问题:在J2EE应用中.发如今自己定义标签中取不到session: HttpSession session = pageContext.getSession(); 你会发现session的值可能是空的 ...

  8. openTSDB ConnectionManager: Unexpected exception from downstream java.io.IOException: Broken pipe

    openTSDB有这种错误: ConnectionManager: Unexpected exception from downstream for [id: 0xf85323a8, /10.65.3 ...

  9. C#之快速排序 C#之插入排序 C#之选择排序 C#之冒泡排序

    C#之快速排序   算法描述 1.假定数组首位元素为“枢轴”,设定数列首位(begin)与末位(end)索引: 2.由末位索引对应元素与“枢轴”进行比较,如果末位索引对应元素大于“枢轴”元素,对末位索 ...

  10. 怎样在win8系统下建立wifi热点

     2012年10月26日,微软正式推出Windows 8操作系统,不少用户也都升级到了最新的Win8.大家知道.在Win7系统下,我们非常方便的就在命令提示符下建立了WIFI热点.那么Win8上是 ...