方式一：

<!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. ie11只能用管理员身份打开解决办法

    解决IE11只能用管理员身份运行的问题 不知道大家有没有遇到这种情况,在毫不知情的情况下 IE11 突然打不开了,必须要用管理员身份运行才可以打开,而且重置浏览器这个方法也不奏效. 今天本人也遇到了, ...

  2. [译]C++如何切分字符串

    声明: 翻译仅以技术学习和交流为目的,如需转载请务必标明原帖链接. http://stackoverflow.com/questions/236129/how-to-split-a-string-in ...

  3. [转] linux新的API signalfd、timerfd、eventfd使用说明

    http://blog.csdn.net/gdutliuyun827/article/details/8460417 三种新的fd加入linux内核的的版本: signalfd:2.6.22 time ...

  4. C++之智能指针

    导读 一直对智能指针有一种神秘的赶脚,虽然平时没怎么用上智能指针,也就看过STL中的其中一种智能指针auto_ptr,但是一直好奇智能指针的设计因此,今天看了一下<C++ Primer Plus ...

  5. 在一个UIView中如何使用多个UIPickerView

    可以现在storyboard的UIView中拖入多个UIPickerView 然后同样是继承相关的UIPickerView协议 <UIPickerViewDataSource,UIPickerV ...

  6. Android蓝牙操作笔记（转）

    蓝牙是一种支持设备短距离传输数据的无线技术.android在2.0以后提供了这方面的支持. 从查找蓝牙设备到能够相互通信要经过几个基本步骤(本机做为服务器): 1.设置权限 在manifest中配置 ...

  7. Android（java）学习笔记216：多线程断点下载的原理（Android实现）

    之前在Android(java)学习笔记215中,我们从JavaSE的角度去实现了多线程断点下载,下面从Android角度实现这个断点下载: 1.新建一个Android工程: (1)其中我们先实现布局 ...

  8. centos 安装 lnmp

    直接yum install nginx不行,要先处理下源,下面是安装完整流程 1. rpm -ivh http://nginx.org/packages/centos/6/noarch/RPMS/ng ...

  9. 自定义鼠标Cursor转变成图片

    今天无意做到项目遇到一个好玩的事情,就是当我鼠标移到一个链接上面,并不是像正常那样出现一个小手,而是变成一个小十字架, 下面看图当时第一眼看到总感觉哪里不对,噢噢噢噢 这样的 小手没了,居然是一个图片 ...

  10. 使用WebUploader使用，及使用后测试横拍或竖拍图片图片方向不对等解决方案

    WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览 ...