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. 【BZOJ4559】成绩比较（组合计数，容斥原理）

    题意: G系共有n位同学,M门必修课.这N位同学的编号为0到N-1的整数,其中B神的编号为0号.这M门必修课编号为0到M- 1的整数.一位同学在必修课上可以获得的分数是1到Ui中的一个整数.如果在每门 ...

  2. Linux下汇编语言学习笔记66 ---

    这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...

  3. 基于端口的信息探测-portscan-1.0

    http://www.tiaozhanziwo.com/archives/174.html

  4. cogs——21. [HAOI2005] 希望小学

    21. [HAOI2005] 希望小学 ★★   输入文件:hopeschool.in   输出文件:hopeschool.out   简单对比时间限制:1 s   内存限制:128 MB [问题描述 ...

  5. NOIP 2009 潜伏者

    P1071 潜伏者 题目描述 RR 国和 SS 国正陷入战火之中,双方都互派间谍,潜入对方内部,伺机行动.历尽艰险后,潜伏于 SS 国的 RR 国间谍小 CC 终于摸清了 SS 国军用密码的编码规则: ...

  6. Ubuntu 16.04安装JMeter测试工具

    JMeter是Java的测试工具,由Apache开发. 同样,JMeter是跨平台的. 下载: http://jmeter.apache.org/download_jmeter.cgi 安装: 7z ...

  7. android 深入浅出 群内“每日一问” 问答总结

    永远不变的就是变. 俗话说的好,环境改变人生. 常常面对的是一群积极奋进的人,那么你的心态和生活也会变的充满斗志.青春在于折腾,趁我们还年轻,拿出你的激情.踏着泪水载着梦,才干拥有自己的一片天空. 上 ...

  8. 踩坑录-IDEA编辑器：找不到TomcatService或ApplicationServers----TomcatService使用指南

    一.找不到TomcatService或ApplicationServers Setp1. 检查IDEA版本 检查IDEA版本是否为Ultimate(终极版需要激活),Community(社区版免费无需 ...

  9. 带头尾和动画的下拉刷新RecyclerView

    项目地址:https://github.com/shichaohui/AnimRefreshRecyclerView 项目中包括一个demo(普通Androidproject)和Android Lib ...

  10. vs2013生成lib

    引擎cocos2d-x-3.1.1 一. cocos创建一个项目.随便是lua还是cpp.这里用cpp演示 二.创建完毕之后执行下项目 之后创建两个类.例如以下 TestLib.cpp文件 #incl ...