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. 乱记结论之OI常用四大数列

    一.斐波那契数列 $f(0)=1,f(1)=1,f(i)=f(i-1)+f(i-2) \ \ \ \ (i>=2)$ 经典的解释是兔子生小孩,第0年一对兔子,一对兔子需要一年长大,后面每年都生小 ...

  2. html5视频播放器 一 （改写默认样式）

    一个项目用到了html5视频播放器,于是就写了一个,走了很多坑,例如在chrome中加载视频出现加载异常等 先看看效果 是不是感觉换不错,以下是我播放器改写样式的布局. <!DOCTYPE ht ...

  3. linux程序命令行选项的3种风格：unix、gnu、x toolkit

    In Unix-like systems, the ASCII hyphen-minus is commonly used to specify options. The character is u ...

  4. FlashChart json数据配置 中文文档

    http://www.riaos.com/ria/2274 FlashChart json数据配置说明 有朋友要用flashchart,感觉这个还不错.就整理了一份文档. 基本包括了所有json配置的 ...

  5. linux内核CFS进程调度策略

    一.概述 首先简介一下主要的设计思路, CFS思路非常easy.就是依据各个进程的权重分配执行时间(权重怎么来的后面再说). 进程的执行时间计算公式为: 分配给进程的执行时间 = 调度周期 * 进程权 ...

  6. JavaScript错误处理和堆栈追踪

    转自:https://github.com/dwqs/blog/issues/49 有时我们会忽略错误处理和堆栈追踪的一些细节, 但是这些细节对于写与测试或错误处理相关的库来说是非常有用的. 例如这周 ...

  7. CentOS 6.9正式版下载

      2017-04-07 ,CentOS 6.9正式发布,带来了诸多改进,具体如下. CentOS 6.9重大改进: — 不再有LiveCD,用户可将LiveDVD复制到USB key,在需要时使用: ...

  8. iOS_开发中遇到的那些问题_1

    [自编号:60][AutoLayout中,怎样让ImageView保持固定的宽高比?比如1:1] 先将imageViewframe手动写成:宽20,高20,再勾选Aspect Ratio加入宽高比约束 ...

  9. Android自己主动提示文本框(AutoCompleteTextView)

    自己主动提示文本框(AutoCompleteTextView)能够加强用户体验,缩短用户的输入时间(百度的搜索框就是这个效果). 首先.在xml中定义AutoCompleteTextView控件: a ...

  10. vux 全局使用 loading / toast / alert

    1.入口文件 main.js import { LoadingPlugin, ToastPlugin, AlertPlugin } from 'vux' Vue.use(LoadingPlugin); ...