方法一： 简单的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. [iOS微博项目 - 1.2] - 导航栏搜索框

    A.导航栏搜索框 1.需求 在“发现”页面,在顶部导航栏NavigationBar上添加一个搜索框 左端带有“放大镜”图标 github: https://github.com/hellovoidwo ...

  2. 嵌入式LINUX入门到实践（二）

    这篇中将围绕韦东山LINUX第二部分教程源码,对IIC协议进行程序实现上的分析. /* I2C registers */#define IICCON      (*(volatile unsigned ...

  3. HDU 4462 Scaring the Birds （暴力求解，二进制法）

    题意:给定一个 n*n的矩阵,在一些位置放上稻草人,每个稻草人的范围是一定,问你最少几个能覆盖整个矩阵. 析:稻草人最多才10个,所以考虑暴力,然后利用二进制法,很容易求解,并且时间很少0ms,注意有 ...

  4. Serializable 序列化为文件

    package test; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundExcept ...

  5. WinAPI: FindWindow、FindWindowEx - 查找窗口

    FindWindow(   lpClassName,        {窗口的类名}   lpWindowName: PChar {窗口的标题} ): HWND;              {返回窗口的 ...

  6. WinForm开发浏览器，WebBrowser获取页面内容，如何解决中文乱码

    WebBrowser的编码可以从文档对象中获得,将代码改为如下即可. System.IO.StreamReader getReader = new System.IO.StreamReader(thi ...

  7. 插入三层treeview代码

    #region treetView加载 private void treeViewLoad() { DataView dv = navds.tbSiteKind.AsDataView(); treeV ...

  8. sql 指令

    SELECT 是用来做什么的呢?一个最经常使用的方式是将资料从数据库中的表格内选出.从这一句回答中.我们立即能够看到两个keyword:从 (FROM)数据库中的表格内选出 (SELECT).(表格是 ...

  9. iOS开发UI-利用Quartz2D 实现基本绘图（画三角形、矩形、圆、圆弧）

    1.画三角形  运行结果如下 1.1具体实现步骤 1.1.1首先新建一个project,然后自定义一个view 1.2代码 #import "htingShapeView.h" @ ...

  10. 高级I/O之readv和writev函数

    readv和writev函数用于在一次函数调用中读.写多个非连续缓冲区.有时也将这两个函数称为散布读(scatter read)和聚集写(gather write). #include <sys ...