方法一： 简单的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. HDU 3308 LCIS (线段树区间合并)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3308 题目很好懂,就是单点更新,然后求区间的最长上升子序列. 线段树区间合并问题,注意合并的条件是a[ ...

  2. ManagementFactory （一） getClassLoadingMXBean

    ClassLoadingMXBean case import java.lang.management.ClassLoadingMXBean; import java.lang.management. ...

  3. 在VB中利用Nuget包使用SQLite数据库和Linq to SQLite

    上午解决了在C#中利用Nuget包使用SQLite数据库和Linq to SQLite,但是最后生成的是C#的cs类文件,对于我这熟悉VB而对C#白痴的来说怎么能行呢? 于是下午接着研究,既然生成的是 ...

  4. Understanding CloudStack’s Physical Networking Architecture

    Understanding and configuring the physical connections of a host in a CloudStack deployment can at f ...

  5. VMware Workstation 11.0 官方中文版最强虚拟机软件（附下载地址）

    VMware Workstation 11.0 新版本功能一览: 支持 Windows 8.1 Update.Windows Server 2012 R2.Ubuntu 14.10.RHEL 7.Ce ...

  6. zendstudio 10下载汉化

      1.文件和汉化文件 ZendStudio官方下载地址:http://www.geekso.com/component/zendstudio-downloads/ 百度云地址: 10.0.0.msi ...

  7. Java系的大网站架构-LinkedIn和淘宝

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html 内部邀请码:C8E245J (不写邀请码,没有现金送) 国 ...

  8. 【转】Android WebRTC 音视频开发总结（一）

    http://www.cnblogs.com/lingyunhu/p/3578218.html 本系列文章主要总结和分享WebRTC开发过程中的一些经验,转载请说明出处(博客园RTC.Blacker) ...

  9. 华为C语言笔试题集合

    ①华为笔试题搜集 1.static有什么用途?(请至少说明两种)     1)在函数体,一个被声明为静态的变量在这一函数被调用过程中维持其值不变.     2) 在模块内(但在函数体外),一个被声明为 ...

  10. 【M1】仔细区别pointers和references

    1.引用必须初始化,而且不能修改指向,这一点和const对象十分相似. 2.引用和指针用法不同,对于引用int& ri = a; rhs是个对象,引用前面加&:对于指针,int* pi ...