方法一： 简单的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. Educational Codeforces Round 5 - C. The Labyrinth (dfs联通块操作)

    题目链接:http://codeforces.com/contest/616/problem/C 题意就是 给你一个n行m列的图,让你求’*‘这个元素上下左右相连的连续的’.‘有多少(本身也算一个), ...

  2. 电脑右键新建文本文档(txt)消失的解决办法

    其实只需要一个注册表就可以了 下载地址http://pan.baidu.com/s/1hr7r0fM 拿走不谢! 注册表的内容是这样的,你也可以新建一个文件把后缀名改成.reg然后把下面的内容copy ...

  3. 创建虚拟交换机（New-VMSwitch）

    #获取网卡列表Get-NetAdapter

  4. 从零开始学android开发-setBackgroundDrawable与setBackgroundResource的区别

    setBackgroundDrawable和setBackgroundResource的区别很多网友不知道View类提供的setBackgroundDrawable和setBackgroundReso ...

  5. Educational Codeforces Round 2 E. Lomsat gelral 启发式合并map

    E. Lomsat gelral Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/600/prob ...

  6. BZOJ 2208: [Jsoi2010]连通数 tarjan bitset

    2208: [Jsoi2010]连通数 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://www.lydsy.com/JudgeOnline/pr ...

  7. MyBatis之八：需要说明的几个java api的生命周期以及封装

    学习mybatis不得不了解SqlSessionFactoryBuilder.SqlSessionFactory.SqlSession.这里主要是讲解它们的生命周期以及一般最佳实践. 一般来说对象的生 ...

  8. 【android】在eclipse中查看genymotion模拟器的sd卡文件夹

    假设用google自带模拟器或者真机调试时,sd卡文件夹是在/mnt/sdcard.这个相信大家都知道. 但是今天用genymotion调试时.发现根本打不开/mnt/sdcard这个文件夹,当时也没 ...

  9. mysql 5.6 原生Online DDL解析

    http://seanlook.com/2016/05/24/mysql-online-ddl-concept/ 做MySQL的都知道,数据库操作里面,DDL操作(比如CREATE,DROP,ALTE ...

  10. Python integer objects implementation

    http://www.laurentluce.com/posts/python-integer-objects-implementation/ Python integer objects imple ...