方式一：

<!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 TCP/IP网络小课堂：net-tools与iproute2大比较

    PS:netstat选项是-planet,方便记忆 http://os.51cto.com/art/201409/450886.htm 如今许多系统管理员仍结合使用ifconfig.route.arp ...

  2. [转] TCP数据包重组实现分析

    PS: 这个实现对于某些特定情况未必是最佳实现,可以用数组来代替队列来实现 参照TCP/IP详解第二卷24~29章,详细论述了TCP协议的实现,大概总结一下TCP如何向应用层保证数据包的正确性.可靠性 ...

  3. python手机号码运营商归属测试

    #手机号码测试: def number_test(): while True: number = input('Please enter your phone number:') CN_mobile ...

  4. ACM比赛技巧

    一.语言是最重要的基本功   无论侧重于什么方面,只要是通过计算机程序去最终实现的竞赛,语言都是大家要过的第一道关.亚洲赛区的比赛支持的语言包括C/C++与JAVA.笔者首先说说JAVA,众所周知,作 ...

  5. 13个简单有用的android开发代码

    1:查看是否有存储卡插入 String status=Environment.getExternalStorageState(); if(status.equals(Enviroment.MEDIA_ ...

  6. iOS中使用正则表达式去掉HTML中的标签元素获得纯文本的方法

    content是根据网址获得的网页源码字符串 - (NSString *)changeToString:(NSString *)content { NSRegularExpression *regul ...

  7. Xcode7设置生成DSYM出现大量警告

    看图,设置成这样就会出现大量的警告,解决方法如下: 将debug information format 更改为:DWARF即可

  8. hibernate_validator_08

    内置的约束条件 Hibernate Validator包含了一些基本的使用比较广的约束,下面是一些Hibernate Validator给出的最常用的约束.另外Hibernate Validator还 ...

  9. vim 支持gb2312

    vi  /etc/vimrc 中添加如下,并保存. set termencoding=encodingset fileencodings=utf-8,gbk,ucs-bom,cp936set shif ...

  10. javascript学习(知识点整理)

    有了这个代码,就可以在定义 中增加更多的控制了 后面会举例关于extjs定义的更多控制     此种方案可以解决定义时需要一些函数调用的情况 函数作用域和声明提前: 即由于js是解释性语言,在执行前会 ...