之前就遇到有人问，不用js，纯css实现幻灯片。

那么对于使用纯的css + html 怎样来实现幻灯片呢？下面有几种方法可供参考，有些还不成熟。

方案一：利用css3的animation

例子传送门点我，点我！

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>幻灯片</title>

    <style>

        .ani {

            width: 440px;

            height: 440px;

            margin: 50px auto;

            overflow: hidden;

            box-shadow: 0 0 5px rgba(0, 0, 0, 1);

            background-size: cover;

            background-position: center;

            -webkit-animation-name: loops;

            -webkit-animation-duration: 20s;

            -webkit-animation-iteration-count: infinite;

        }

        @-webkit-keyframes loops {

            0% {

                background: url(../images/01.jpg) no-repeat;

            }

            25% {

                background: url(../images/02.jpg) no-repeat;

            }

            50% {

                background: url(../images/03.jpeg) no-repeat;

            }

            75% {

                background: url(../images/04.jpg) no-repeat;

            }

            100% {

                background: url(../images/05.jpg) no-repeat;

            }

        }

    </style>

</head>

<body>

<div class="ani"></div>

</body>

</html>

方案二：把需要展示的图片集合并长一个长横图，然后再通过:hover伪类来改变图片的位置，从而达到幻灯片的效果

例子传送门还是点我吧

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        #wrap {

            width: 580px;

            height: 440px;

            background: #9ed2d9;

            border: 5px solid #9ed2d9;

            position: relative;

            margin: 30px auto 20px auto;

            -o-border-radius: 20px;

            -icab-border-radius: 20px;

            -khtml-border-radius: 20px;

            -moz-border-radius: 20px;

            -webkit-border-radius: 20px;

            border-radius: 20px;

        }

        #slide {

            padding: 370px 0 0 0;

            margin: 0;

            list-style: none;

            width: 480px;

            height: 30px;

            overflow: hidden;

            position: absolute;

            left: 48px;

            top: 29px;

        }

        #slide b {

            float: left;

        }

        #slide span {

            position: absolute;

            left: 0;

            top: 0;

            height: 360px;

            width: 480px;

            border: 1px solid #698639;

            border-color: #698639 #e0ebcb #e0ebcb #698639;

        }

        #slide b.overlay {

            display: block;

            width: 490px;

            height: 370px;

            background: transparent;

            position: absolute;

            top: -5px;

            left: -5px;

        }

        #slide i {

            display: block;

            float: left;

            margin-right: 5px;

            width: 20px;

            height: 20px;

            color: #000;

            line-height: 19px;

            font-family: arial, sans-serif;

            font-style: normal;

            font-size: 11px;

            text-align: center;

            cursor: pointer;

        }

        #slide b img {

            display: block;

            border: 0;

            position: absolute;

            top: 0;

            left: -1px;

            -webkit-transition: all 0.7s ease-in-out;

        }

        #slide i:hover {

            background-position: 0 -20px;

            color: #fff;

        }

        #slide .p1:hover img {

            left: -1px;

        }

        #slide .p2:hover img {

            left: -481px;

        }

        #slide .p3:hover img {

            left: -961px;

        }

        #slide .p4:hover img {

            left: -1441px;

        }

        #slide .p5:hover img {

            left: -1921px;

        }

        #slide .p6:hover img {

            left: -2401px;

        }

        #slide .p7:hover img {

            left: -2881px;

        }

        #slide .p8:hover img {

            left: -3361px;

        }

        #slide .p9:hover img {

            left: -3841px;

        }

        #slide .p10:hover img {

            left: -4321px;

        }

    </style>

</head>

<body>

<div id="wrap">

    <div id="slide">

        <b class="p1"><i>1</i>

            <b class="p2"><i>2</i>

                <b class="p3"><i>3</i>

                    <b class="p4"><i>4</i>

                        <b class="p5"><i>5</i>

                            <b class="p6"><i>6</i>

                                <b class="p7"><i>7</i>

                                    <b class="p8"><i>8</i>

                                        <b class="p9"><i>9</i>

                                            <b class="p10"><i>10</i><span><img src="../images/long.jpg" alt="" /></span></b>

                                        </b>

                                    </b>

                                </b>

                            </b>

                        </b>

                    </b>

                </b>

            </b>

        </b>

        <b class="overlay"></b>

    </div> <!-- end slide -->

</div>

</body>

</html>

方案三：利用描点。通过点击描点来选择图片，达到幻灯片的效果。

我没有传送门，你们抢吧。

幻灯片の纯CSS，NO JavaScript的更多相关文章

  1. 使用基于关系的选择器和伪类选择器创建纯CSS无JavaScript的鼠标移动到上面即可显示的下拉菜单

    html代码: <div class="menu-bar"> <ul> <li> <h3 class="text-warning ...

  2. 用纯css、JavaScript、jQuery简单的轮播图

    完成一个可以自动切换或点击数字的轮播图 HTML代码只需要一个div 包含着一个图片和一个列表,我们主要的思路就是通过点击相应的数字,改变图片的 路径. 有4张图片都在img文件夹里,名称为  img ...

  3. 纯css实现幻灯片效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  4. 纯css做幻灯片效果

    css3里面有一个@keyframes动画功能. w3c上面的例子: 可以使用它来做一个幻灯片效果. <!DOCTYPE html> <html lang="en" ...

  5. 纯CSS（无 JavaScript）实现的响应式图像显示

    有许多方法可以实现web页面里图像的应答.然而,我碰到的所有方案都使用了JavaScript.这使我疑惑不用JavaScript实现图像响应是否可行. 我提出了下面纯CSS的方案. 它是如何工作的呢? ...

  6. 纯 CSS 实现幻灯片播放

    介绍:   今日看到一道面试题,关于 使用纯CSS,不利用js, 写一个简单的幻灯效果页面.于是做了一个小demo,建议使用chrome,IE11查看~~ 主要思想: 利用 CSS3的 伪类选择器 : ...

  7. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  8. 利用animation和text-shadow纯CSS实现loading点点点的效果

    经常在网上看到loading状态时的点点点的动态效果,自己也用JS写了一个,思路是使用一个计数参数,然后在需要添加点的元素后面利用setInterval一个一个加点,当计数到3时,把点变为一个--写完 ...

  9. 用纯css改变下拉列表select框的默认样式（不兼容IE10以下）

    在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式.     事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计 ...

随机推荐

  1. [译]PyUnit—Python单元测试框架(1)

    1. 原文及参考资料 原文链接:http://docs.python.org/2/library/unittest.html# 参考文档: http://pyunit.sourceforge.net/ ...

  2. 关于mysql的error-based injection payload

    今天用sqlmap扫一个网站,想得到一个表的所有列名,注意到sqlmap用到的一个error-based payload的: 1 AND (SELECT 3174 FROM(SELECT COUNT( ...

  3. 五指CMS v1.2 GBK 发布下载

    五指CMS v1.2 GBK 版本下载地址: http://www.wuzhicms.com/uploadfile/wuzhicms/wuzhicms-v1.2.zip       从内测到公测,五指 ...

  4. Codeforces Round #343 (Div. 2) D - Babaei and Birthday Cake 线段树+DP

    题意:做蛋糕,给出N个半径,和高的圆柱,要求后面的体积比前面大的可以堆在前一个的上面,求最大的体积和. 思路:首先离散化蛋糕体积,以蛋糕数量建树建树,每个节点维护最大值,也就是假如节点i放在最上层情况 ...

  5. android获取屏幕分辨率

    DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(dm); dm. ...

  6. Combobox 成员添加

    this.comboBox1.Items.AddRange(new object[] {"Item 1", "Item 2", "Item 3&quo ...

  7. 教程-Delphi调用C# WEBSERVICE（二）

    第二步:将webserivce的WSDL导入到该dll工程中,如何导,方法至少有两种,我说简单的一种:  file->new->other->WebService->WSDL ...

  8. Java 中 String 类和StringBuilder 类的常用方法

    String 类提供了许多用来处理字符串的方法,例如,获取字符串长度.对字符串进行截取.将字符串转换为大写或小写.字符串分割等,下面我们就来领略它的强大之处吧. String 类的常用方法: 结合代码 ...

  9. day1作业

    作业一:博客 作业二:编写登陆接口 输入用户名密码 认证成功后显示欢迎信息 输错三次后锁定 作业三:多级菜单 三级菜单 可依次选择进入各子菜单 所需新知识点:列表.字典 作业一分析: readme.m ...

  10. 1515：打印1到最大的N位数 @jobdu

    题目1515:打印1到最大的N位数 时间限制:1 秒 内存限制:128 兆 特殊判题:否 提交:625 解决:323 题目描述: 给定一个数字N,打印从1到最大的N位数. 输入: 每个输入文件仅包含一 ...