方式一：

<!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. PHP ORM框架与简单代码实现(转)

    对象关系映射(Object Relational Mapping,简称ORM)是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术. 简单的说,ORM是通过使用描述对象和数据库之间映射的元数据 ...

  2. Java 7之多线程- Semaphore--转载

    Semaphore用于保存当前可用许可的数量.是通过共享锁实现的.根据共享锁的获取原则,Semaphore分为"公平信号量"和"非公平信号量". "公 ...

  3. JAVA IDE基本操作常识

    快捷键: Ctrl+/   选中区单行注释和 取消 选中区单行注释和 Alt + / 代码辅助 shift + Ctrl +/ 选中区多行注释 shift + Ctrl +\ 取消选中区多行注释 Ct ...

  4. setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key delete.的问题

    今天弄ios的sqlite数据库,程序写完后编译发现一个奇怪的问题,错误信息也不提示行号,只有如下信息: 一遍遍的查找代码也没有发现啥问题,后来在storyboard中找到了该错误的原因 原来是一个按 ...

  5. HDU -2298 Toxophily（三分法）

    这道题目,可以推出物理公式直接来做,但是如果推不出来就必须用程序的一种算法来实现了,物理公式只是适合这一个或者某个题,但是这种下面这种解决问题的方法确实解决了一类问题 ----三分法,大家可能都听说过 ...

  6. 将JSON数组显示前台Table中

    将JSON数组显示前台Table中 在最近的学习中遇到一个小问题,如何把JSON数组显示在前台的table中,经过一番借鉴和学习之后终于解决了这个问题.具体的代码如下: (前提:利用ajax获取过来的 ...

  7. Day7 - Python基础7 面向对象编程进阶

    Python之路,Day7 - 面向对象编程进阶   本节内容: 面向对象高级语法部分 经典类vs新式类 静态方法.类方法.属性方法 类的特殊方法 反射 异常处理 Socket开发基础 作业:开发一个 ...

  8. Windows Phone中使用Storyboard做类似 IOS 屏幕小白点的效果

    windows phone中做动画其实很方便的,可以使用Blend拖来拖去就做出一个简单的动画,下面做了一个 ios屏幕小白点的拖动效果,包括速度判断移动 使用Blend生成以下代码 <Stor ...

  9. springmvc数组参数传递

    在开发中遇到将form中的name值一样的多个input元素传递到后台,我用的是springmvc. 刚开始的时候老是报400的请求错误.后来查了下资料,其实解决方案挺简单的. 我的后台control ...

  10. java判断网络连接是否正常

    /** * 判断本机当前的网络状态是否联通 * 在这里主要用到中国天气信息,所以访问百度地址是否能够访问成功来判断当前的网络状态 */ public static boolean isConnect( ...