方式一：

<!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. [转] linux新的API signalfd、timerfd、eventfd使用说明

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

  2. C# 读取XML文件示例

    有关XML文件编写规范,请参考:http://www.w3school.com.cn/xml/index.aspXML内容如下(文件名为:Information.xml):浏览器显示: <?xm ...

  3. Linux下/etc/fstab文件详解

    当系统启动的时候,系统会自动地从这个文件读取信息,并且会自动将此文件中指定的文件系统挂载到指定的目录. [root@rusky ~]# vi /etc/fstab # # /etc/fstab # C ...

  4. mac 卸载java

    由于电脑上的jdk版本和项目组使用的版本不一致,因此需要卸载,但是作为一个新人小白加没有使用mac的过多经验,还是稍微费了一些些功夫的,从网上查的资料,终于解决这个问题,因此记录一下. 参考博客:ht ...

  5. 如何开通www国际域名个人网站

    欢迎访问我的域名http://www.baiqiantao.xyz 一.准备知识 什么是域名? 所有以www开头的域名,就是国际域名:不以www开头的域名,都是为子域名. 域名都有后缀,后缀是有意义的 ...

  6. 学习CSS一些事（上）

    p.s:这是我在学习中总结出来知识,如有不对,请多包涵.谢谢. CSS样式:行内样式,内部样式,外部样式,他们的优先级是:行内,内部,外部,遵循就近原则. 一.HTML+CSS布局分为三大类,一是流式 ...

  7. java计算两个日期之间相隔的天数

    import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Calendar; impor ...

  8. Web中常用字体介绍（转）

    1.在Web编码中,CSS默认应用的Web字体是有限的,虽然在新版本的CSS3,我们可以通过新增的@font-face属性来引入特殊的浏览器加载字体. 浏览器中展示网页文字内容时,文字字体都会按照设计 ...

  9. repeater控件 + marquee标签 实现文字滚动显示

    各种信息网站.BBS等网站上的公告信息模块的实现 拖出一个repeater控件绑定数据库中要显示的信息 在repeater的 <ItemTemplate> ... </ItemTem ...

  10. java_reflect_04

    反射操作数组: 通过public Class<?> getComponentType()来取得一个数组的Class对象 例: import java.lang.reflect.Array ...