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. 【SGU194&ZOJ2314】Reactor Cooling（有上下界的网络流）

    题意: 给n个点,及m根pipe,每根pipe用来流躺液体的,单向的,每时每刻每根pipe流进来的物质要等于流出去的物质,要使得m条pipe组成一个循环体,里面流躺物质. 并且满足每根pipe一定的流 ...

  2. 【ZJOI2017 Round1练习】D8T2 sequence（DP）

    题意: 思路: #include <algorithm> #include <iostream> #include <cstring> #include <c ...

  3. codevs2597 团伙

    题目描述 Description 1920年的芝加哥,出现了一群强盗.如果两个强盗遇上了,那么他们要么是朋友,要么是敌人.而且有一点是肯定的,就是: 我朋友的朋友是我的朋友: 我敌人的敌人也是我的朋友 ...

  4. 【Tomcat】Tomcat Connector的三种运行模式【bio、nio、apr】

    Tomcat Connector(Tomcat连接器)有bio.nio.apr三种运行模式 bio bio(blocking I/O,阻塞式I/O操作),表示Tomcat使用的是传统的Java I/O ...

  5. msp430入门编程04

    msp430中C语言的变量与数据类型 msp430入门学习 msp430入门编程

  6. JVM定位程序假死或cpu占用高的线程

    linux系统: 参考:https://blog.csdn.net/qq_40197576/article/details/80287515 1>使用top命令查看占用cpu进程情况,得到jav ...

  7. ubuntu12.04+cuda6.0+opencv2.4.9

    更新了cuda之后,opencv的gpu模块又要重新编译了,这个地方有一个疑问,我对cuda6.0装了两次,第一次装好之后,没有配一个bumblebee,重装了cuda6.0之后,发现原来编译的ope ...

  8. NYOJ 题目42 一笔画问题（欧拉图）

    一笔画问题 时间限制:3000 ms  |  内存限制:65535 KB 难度:4 描写叙述 zyc从小就比較喜欢玩一些小游戏.当中就包含画一笔画.他想请你帮他写一个程序.推断一个图是否可以用一笔画下 ...

  9. GNS3配置SecureCRT

    C:\SecureCRT\SecureCRT.exe /script D:\GNS3\DyRouter.vbs /T /telnet 127.0.0.1 %p "D:\Program Fil ...

  10. [英语学习]微软面试前英语集训笔记-day 1

    最近有机会参加微软面试前的英语集训. 第一天是由wendy老师主讲.热场题目是介绍你自己.包括你的姓名,家庭hobby,爱好,专业,学校,工作经历等等. 接下来的主题是friendship.给我印象较 ...