方式一：

<!DOCTYPE HTML>

<html>

  <head>

  <style>

  #cont {

  position: relative;

  height: 300px;

  }

img {

      position: absolute;

      width: 400px;

      height: 300px;

      z-index: 1;

    }

img:first-child,

img:target {

      z-index: 2;

    }

#pag {

    width:400px;

}

  </style>

  </head>

  <body>

  <div id="cont">

      <img id="img1" src="data:images/1.JPG">

      <img id="img2" src="data:images/2.JPG">

      <img id="img3" src="data:images/3.JPG">

      <img id="img4" src="data:images/4.JPG">

    </div>

    <div id="pag" align="center">

      <a href="#img1">1</a>

      <a href="#img2">2</a>

      <a href="#img3">3</a>

      <a href="#img4">4</a>

    </div>

  </body>

</html>

方式二：

<!doctype html>

<html>

  <head>

    <style>

    img {

      display: none;

      width: 400px;

      height: 300px;

    }

    input:checked + img {

      display: block;

    }

    input {

      position: absolute;

      left: -9999px;

    }

    label {

      cursor: pointer;

    }

    #pag{

        width:400px;

    }

    </style>

  </head>

  <body>

    <div id="cont">

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

      <img src="data:images/1.JPG">

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

      <img src="data:images/2.JPG">

      <input id="img3" name="img" type="radio" checked="checked">

      <img src="data:images/3.JPG">

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

      <img src="data:images/4.JPG">

    </div>

    <div id="pag" align="center">

      <label for="img1">1</label>

      <label for="img2">2</label>

      <label for="img3">3</label>

      <label for="img4">4</label>

    </div>

  </body>

</html>

html幻灯效果页面的更多相关文章

  1. ASP.NET中使用jQuery插件实现图片幻灯效果

    参照网上的资料及提供的jQuery插件实现图片幻灯效果. 1.页面前台代码: //头部引用 <head runat="server"><title>< ...

  2. jQuery 写的插件图片上下切换幻灯效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jQuery框架开发一个最简单的幻灯效果

    在线演示 在这个课程中,我们将介绍如何使用jQuery来开发一个最简单的图片幻灯效果. 立刻观看互动课程:jQuery框架开发一个最简单的幻灯效果 阅读原文:jQuery框架开发一个最简单的幻灯效果

  4. 仿造w3school的试一试功能，实现左侧编辑框，右侧效果页面

    转自http://fhqllt.iteye.com/blog/836186 每次想快速测试页面效果的时候,特别是在学习前端代码的时候,就想到W3school的那个试一试功能,一直都是用他们那个在线的版 ...

  5. 【仅支持移动设备】Swipe.JS轻量级移动幻灯效果

    在线演示 本地下载 请使用手机直接访问地址: 单独页面展示效果

  6. 使用Javascript来创建一个响应式的超酷360度全景图片查看幻灯效果

    360度的全景图片效果常常可以用到给客户做产品展示,今天这里我们推荐一个非常不错的来自Robert Pataki的360全景幻灯实现教程,这里教程中将使用javascript来打造一个超酷的全景幻灯实 ...

  7. 使用FractionSlider生成的视差幻灯效果原型

    在线演示 本地下载 非常棒的jQuery插件,帮助你创建超酷的视差效果幻灯!

  8. 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 ...

  9. 利用keyframes实现幻灯效果

    源码如下: <style> @keyframes looppic{ from{ background:url(images/1.jpg); /*图片的地址*/ } 25%{ /*可以依据不 ...

随机推荐

  1. Java基础知识强化之IO流笔记10：File类输出指定目录下指定后缀名的文件名称案例（File类的文件过滤器方法改进list（ FilenameFilter ff））

    1. 案例: 判断F盘下是否有后缀名为.jpg的文件,如果有的话,就输出这个文件名. 2. 案例代码如下: (1)思路是:先获取所有的文件和文件夹封装的对象,然后遍历的时候,依次判断,如果满足条件就输 ...

  2. Java基础知识强化之IO流笔记07：自定义的异常概述和自定义异常实现

    1. 开发的时候往往会出现很多问题(java内部系统框架中没有提供这些异常) 比如说:考试成绩必须在0~100之间. 很明显java没有对应的异常,需要我们自己来做一个异常. (1)继承自Except ...

  3. Android（java）学习笔记220：开发一个多界面的应用程序之界面间数据传递

    1.界面跳转的数据传递 (1)intent.setData() --> intent.getData():     传递的数据比较简单,一般是文本类型的数据String:倘若我们传递的数据比较复 ...

  4. 安装Stomp扩展时错误提示error: 'zend_class_entry' has no member named 'default_properties'

    在安装stomp扩展时, 有这样的提示 error: 'zend_class_entry' has no member named 'default_properties' 交待下安装上下文, sto ...

  5. 关于 yii 验证码显示, 但点击不能刷新的处理

    先说说 render 与 renderPartial, 各位看官, 先别走, 我没跑题, 这个问题如果需要解决, 关键就在 render 与 renderPartial 的区别. renderPart ...

  6. .net mvc datatables中orderby动态排序

    今天在做项目中用datatables的排序来做筛选,不过人比较懒,不想写那么多的关于排序的代码,于是寻思这在度娘上找找,结果不负有心人啊,更感谢贴出此贴的哥们,来源:http://blog.csdn. ...

  7. <c:if>判断参数是否同时为空

    <c:if test="${empty str}">  str为空</c:if> <c:if test="${not empty str}& ...

  8. HTML5 离线缓存详解（转）

    离线缓存是html5新特性之一,简单理解就是第一次加载后将数据缓存,在没有清除缓存前提下,下一次没有网络也可以加载,用在静态数据的网页或游戏比较好用.当然,Html5新的特性都不是所有浏览器都能支持的 ...

  9. （转）dedecms插件开发简明教程

    这篇文章主要为大家介绍了dedecms插件开发的方法,以实例形式对插件开发的步骤进行了详细的介绍,非常具有实用价值,需要的朋友可以参考下  原文:http://www.jb51.net/cms/230 ...

  10. cocos2dx 资源合并.

    文件合并之前 文件合并之后 吐槽 我们项目比较奇葩, ui用cocostudio做, 这项光荣的任务由美术接手. 这个美术是个新手, 经过我长时间的观察, 她似乎不用怎么画画. 至少在很长一段时间里, ...