方法一： 简单的CSS代码实现幻灯片效果

方法二： 使用CSS3 Animation来制作幻灯片

方法一： 简单的CSS代码实现幻灯片效果

话不多说，直接上代码

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>CSS实现简单的幻灯片效果</title>

    <style type="text/css">

        img {

            display: none;

            width: 600px;

            height: 600px;

        }

        input:checked + img {

            display: block;

        }

        input {

            position: absolute;

            left: -9999px;

        }

        label {

            cursor: pointer;

        }

    </style>

</head>

<body>

    <div id="cont">

        <input id="img1" type="radio" checked="checked" name="img"  />

        <img src="http://www.gdzp.org/uploadfile/2014/0905/20140905052820850.jpg" />

        <input id="img2" type="radio" name="img">

        <img src="http://image72.360doc.com/DownloadImg/2014/05/2605/42035151_6.jpg" />

    </div>

    <div id="nav">

        <label for="img1">第一张</label>

        <label for="img2">第二张</label>

    </div>

    <!--兼容性： IE8以及IE8以下的浏览器不兼容，只显示文字，不显示图片-->

    <!--以上代码实现使用到的技术：

        除了设置相应的CSS样式，有两点值得注意：

            1.设置按钮的位置(绝对定位) ，left:-9999px用来隐藏按钮；

            2.<label>标签中的for属性与input标签中的id关联，然后根据input的checked的状态显示或隐藏图片，来达到显示幻灯片效果的目的。

    -->

　　<script type="text/javascript" src="http://runjs.cn/gist/lgkdjey6/all"></script>

</body>

</html>

大家看看，有不足的地方还请指正。

点击查看效果

源地址：http://zhidao.baidu.com/question/808066722818527652.html

方法二： 使用CSS3 Animation来制作幻灯片

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>css3 实现幻灯片效果</title>

    <style type="text/css">

        .huanDengPic {

            width: 600px;

            height: 600px;

            margin: 50px auto 0;

            overflow: hidden;

            box-shadow:  0 0 5px rgba(0,0,0,1);   /*CSS3 box-shadow属性,里面的值的设置s可以去网上查*/

            background-size: cover;

            background-position: center;

            -webkit-animation-name: "loops"; /*检索或设置对象所应用的动画名称*/

            -webkit-animation-duration: 10s; /*检索或设置对象动画的持续时间*/

            -webkit-animation-iteration-count: infinite;  /*检索或设置对象动画的循环次数，此处的"infinite"为无限循环的意思*/

        }

        @-webkit-keyframes "loops" {  /*动画名称和上面设置的动画名称一样*/

            /*下面是动画过程*/

            0% {

                background: url(http://t1.mmonly.cc/uploads/tu/zyf/tt/20160520/kewnk2ermbe.jpg) no-repeat;

            }

            50% {

                background: url(http://t1.mmonly.cc/uploads/tu/zyf/tt/20160520/j0qoejfukbu.jpg) no-repeat;

            }

            100% {

                background: url(http://t1.mmonly.cc/uploads/tu/zyf/tt/20160520/oajlgqc2nud.jpg) no-repeat;

            }

        }

    </style>

</head>

<body>

    <div class="huanDengPic"></div>

</body>

</html>

点击查看效果

使用CSS实现一个简单的幻灯片效果的更多相关文章

  1. Css实现一个简单的幻灯片效果页面

    使用animation动画实现一个简单的幻灯片效果. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 2 ...

  2. 简单说 用CSS做一个魔方旋转的效果

    说明 魔方大家应该是不会陌生的,这次我们来一起用CSS实现一个魔方旋转的特效,先来看看效果图! 解释 我们要做这样的效果,重点在于怎么把6张图片,摆放成魔方的样子,而把它们摆放成魔方的样子,重点在于用 ...

  3. 【Css】一个简单的选项卡

    这次来做一个简单的选项卡. 选项卡其实就分3个部分:html代码,用于显示的内容:css代码,用于显示的样式:javascript代码,用于点击事件. 老规矩,先写一个html坯子. <!DOC ...

  4. 【Css】一个简单的图片库

    今天做一个简单的图片库! 其实这个在w3school教程里介绍得很好了,不过看到什么,自己动手做一次,记得也深刻不是. 我们分几步来走: 第一步:先写一个坯子. <html> <he ...

  5. IOS中一个简单的粒子效果实现

    1.效果图展示 2.实现思路 1> 首先要实现上面的效果,第一步要处理的就是一个简单的画板,在View上面用鼠标滑动的时候画出线条,这个功能可使用UIBezierPath实现 2> 关于粒 ...

  6. Css打造一个简单的静态七巧板

    偶然在微博上看到用css写一个七巧板,正好也有一些源代码,于是就试着敲了敲. 主要是利用了css3的transform,实现平移,旋转,变形,直接用看到的代码敲出来之后有些问题,因为宽度上下面绿色的三 ...

  7. 【CSS】 一个简单的导航条

    今天来做一个导航条! 首先写一个坯子: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &quo ...

  8. js/html/css做一个简单的图片自动（auto）轮播效果//带注释

    FF(firefox)/chrom/ie稳定暂无bug...注意:请自己建立一个images文件,放入几张900*238的图片(注意图片格式和名字与程序中一致). 1. [图片] 1.JPG 2. [ ...

  9. CSS制作一个简单网页的下拉导航栏

    网页下拉导航栏的制作 网页下拉导航栏的制作很简单,只需要运用好CSS中伪选择器. 首先说明几个简单的伪选择器(比较常用的): link:连接平常的状态 visited:连接被访问过之后 hover:鼠 ...

随机推荐

  1. 当心回车符破坏你的JSON数据

    今天发现系统中一个地方获取JSON数据时,时而失败,时而成功,最后发现是回车符搞的鬼. 当你的JSON中有回车符时,会致使你的JSON出现格式错误:解决办法是在保存数据,或整理数据向客户端输出时将回车 ...

  2. CodeForces 732C Sanatorium (if-else)

    题意:某人去旅游,记录了一共吃了多少顿饭,早中晚,但是有可能缺少,问你最少缺少了多少顿. 析:每把三个数排序,然后再一一对比,肯定是以最大数为主,其他两个肯定是缺少了. 代码如下: #pragma c ...

  3. Oracle-11g 数据库启动时，报错"ORA-01092"及"ORA-18008: cannot find OUTLN schema"

    适用情形: Oracle-11g 数据库启动时,出现类似如下错误. ORA-01092: ORACLE instance terminated. Disconnection forced ORA-18 ...

  4. JS基础DOM篇之二：ＤＯＭ级别与节点层次？

    通过上一篇我们大致了解了什么是DOM,今天我们继续深入了解. 1.DOM级别       在大家阅读DOM标准的时候,可能会看到DOM(0/1/2/3)级的字眼,这就是DOM级别.但实际上,DOM0级 ...

  5. Unix: How to Install BerkeleyDB From Source

    http://www.masaokitamura.com/2010/07/23/unix-how-to-install-berkeleydb-from-source/ This documentati ...

  6. skyline TerraBuilder 制作MPT方法与技巧（1）

    MPT是skyline独有的三维地形数据格式,可简单理解为 影像图+高程=三维地形(三维底图),以下介绍用skyline TerraBuilder(以下简称TB)制作MPT的方法与技巧 用TB制作MP ...

  7. CSS3/jQuery自己定义弹出窗体

    简单演示一下,精简了演示效果和css样式文件,更利于在项目中的实际应用 引入style.css   index.js <!DOCTYPE HTML PUBLIC "-//W3C//DT ...

  8. Android4.4 蓝牙源码部分分析

    最近GOOGLE发布了Android4.4,看了一下源码:4.4的蓝牙打开流程这一部分还是有些变化的,从界面上看蓝牙开关就是设置settings里那个switch开关,widget开关当然也可以,起点 ...

  9. 【linux设备模型】之platform设备驱动

    一.platform总线.设备和驱动     platform是一种虚拟总线,对应的设备称为platform_device,对应的驱动称为platform_driver. platform_devic ...

  10. PHP获取用户真实 IP , 淘宝IP接口获得ip地理位置(转)

    <?php /** * 获取用户真实 IP */ function getIP() { static $realip; if (isset($_SERVER)){ if (isset($_SER ...