html幻灯效果页面
方式一：
<!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幻灯效果页面的更多相关文章
- ASP.NET中使用jQuery插件实现图片幻灯效果
参照网上的资料及提供的jQuery插件实现图片幻灯效果. 1.页面前台代码: //头部引用 <head runat="server"><title>< ...
- jQuery 写的插件图片上下切换幻灯效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery框架开发一个最简单的幻灯效果
在线演示 在这个课程中,我们将介绍如何使用jQuery来开发一个最简单的图片幻灯效果. 立刻观看互动课程:jQuery框架开发一个最简单的幻灯效果 阅读原文:jQuery框架开发一个最简单的幻灯效果
- 仿造w3school的试一试功能，实现左侧编辑框，右侧效果页面
转自http://fhqllt.iteye.com/blog/836186 每次想快速测试页面效果的时候,特别是在学习前端代码的时候,就想到W3school的那个试一试功能,一直都是用他们那个在线的版 ...
- 【仅支持移动设备】Swipe.JS轻量级移动幻灯效果
在线演示 本地下载 请使用手机直接访问地址: 单独页面展示效果
- 使用Javascript来创建一个响应式的超酷360度全景图片查看幻灯效果
360度的全景图片效果常常可以用到给客户做产品展示,今天这里我们推荐一个非常不错的来自Robert Pataki的360全景幻灯实现教程,这里教程中将使用javascript来打造一个超酷的全景幻灯实 ...
- 使用FractionSlider生成的视差幻灯效果原型
在线演示 本地下载 非常棒的jQuery插件,帮助你创建超酷的视差效果幻灯!
- 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 ...
- 利用keyframes实现幻灯效果
源码如下: <style> @keyframes looppic{ from{ background:url(images/1.jpg); /*图片的地址*/ } 25%{ /*可以依据不 ...
随机推荐
- Lucene中string docvalues使用utf-16的优化
原来的string docvalues使用utf-8编码,载入时转码花费大量时间,我们把转码实现从new String(bytes, "UTF-8")改用lucene的bytesR ...
- 把安卓源代码中的system app独立出来，像开发普通app那样开发
个人建议首先依照android源码的ide/eclipse中的格式化xml和import导入到你编译的eclipse中,假设你编译的android源码是2.3以上的版本号的,建议用JDK6 ...
- [转] Are You Making a Big Mistake in This Volatile Market?
Stock market volatility continues unabated. It may be too early to tell, but I’m marking the top of ...
- AWS S3国内与国外的区别
S3云存储国际版目前正被某墙,国内部分地区只能下载不能上传,所以建议S3使用国内AWS的. 国内S3与国外S3在编程时注意以下几点: 1)URL不通用 国际版的S3可以使用不带Region的URL,例 ...
- [Codeforces 501D] - Misha and Permutations Summation
题意是给你两个长度为$n$的排列,他们分别是$n$的第$a$个和第$b$个全排列.输出$n$的第$\left(a+b \right)\textrm{mod} \, n!$个全排列. 一种很容易的想法是 ...
- 纯css+js水平时间轴
自定义,并自动加载时间节点 当前时间节点居中,突出显示 时间动态无痕添加 效果图: 初始状态 时间左走到一定2016.1月后 html: <!-- 水平时间轴 --> <div id ...
- Codeforces-Div312
题意:给你n个数,进行*2,/2操作,求解最小操作次数能使所有数相同. 思路:因为数值在100000以内,直接枚举过去,对读入的每一个数,模拟操作,用数组s来存放累计操作步数,数组flag用来标记确 ...
- Angular JS API
ng function angular.bind angular.bootstrap angular.copy angular.element angular.equals angular.exten ...
- My.Ioc 代码示例——实现自动注册/解析
在很多 Ioc 容器中,当使用者向容器请求实现了某个契约类型 (Contract Type) 的服务时 (调用类似如下方法 container.Resolve(Type contractType)), ...
- AlertView + Block 的使用
AlertView的使用还是很频繁的,扁平化以后似乎也不是那么丑了,但是到现在为止官方还是在用Delegate来处理点击事件,很影响程序的可读性. 如果用Block那么就会一目了然.自己本来想写一个, ...