方法一： 简单的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. 如何设置(修改)jetty(maven插件maven-jetty-plugi)的端口

    在使用jetty的maven插件,有两种方式来改变jetty server的端口,第一种方式较为简单,即: 通过命令行指定端口:mvn -Djetty.port=9999 jetty:run 另一种方 ...

  2. 转载JQuery 中empty, remove 和 detach的区别

    转载 http://www.cnblogs.com/lisongy/p/4109420.html .empty()  描述: 从DOM中移除集合中匹配元素的所有子节点. 这个方法不接受任何参数. 这个 ...

  3. Spring @RequestHeader用法

    Spring MVC提供了 @RequestHeader注解,能够将请求头中的变量值映射到控制器的参数中.下面是一个简单的例子: import org.springframework.stereoty ...

  4. python 循环

    200 ? "200px" : this.width)!important;} --> 介绍 python中有两种循环,分别是for...in循环.while循环:for.. ...

  5. sql:[dbo].[smt_MES_RptProductDaily] 生产日报表

    USE [ChangHongMES_904]GO/****** Object: StoredProcedure [dbo].[smt_MES_RptProductDaily] Script Date: ...

  6. Spring MVC 的视图转发

    Spring MVC 默认采用的是转发来定位视图,如果要使用重定向,可以如下操作 1.使用RedirectView public ModelAndView login(){ RedirectView ...

  7. GitHub托管项目步骤

    1.打开Git Shell ,进入你要托管的项目目录里.然后输入git init ,该项目下就会多一个.git文件夹 2.点击add,然后再path里面输入你项目的,git文件夹目录地址.如下: 3. ...

  8. wiki1169-传纸条（dp)

    http://wikioi.com/problem/1169/ 四维数组和三维数组: #include<iostream> #include<cstdio> #include& ...

  9. cocos2d-x 获取系统时间

    转自:http://blog.csdn.net/jinjian2009/article/details/9449585 之前使用过cocos2d-x获取系统时间,毫秒级的 long getCurren ...

  10. 【Objective-C】04-第一个OC程序解析

    说明:这个Objective-C专题,是学习iOS开发的前奏.也为了让有面向对象语言开发经验的程序猿,可以高速上手Objective-C.假设你还没有编程经验,或者对Objective-C.iOS开发 ...