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%{ /*可以依据不 ...
随机推荐
- Junit使用教程（一）
几乎所有程序员都听说过Junit的大名,但不知真正懂得运用它的人有多少,我便是其中的一个小白. 知道Junit是用来测试的,但却把“宝刀”当成了“菜刀”用.为了从此不再菜鸟,特此总结整理了下Junit ...
- configure JAAS for jboss 7.1 and mysql--reference
Hello all, In this tutorial we are going to configure JAAS for jboss 7.1 and mysql for Form based au ...
- c++回调编程本质
1. boost:bind获得一个函数对象,就像函数指针一样,这个行为可以作为回调 2. bosot:bind的函数对象可以保存别的对象的引用,回调对象的成员函数 3. boost:function是 ...
- Android（java）学习笔记247：ContentProvider使用之利用ContentProvider备份和还原手机短信（掌握）
1.通过阅读系统源码我们知道: 短信的内容提供者: content://sms/ 系统短信的内容提供者的路径 2. 利用ContentProvider备份和还原手机短信: (1) ...
- Python分类统计数据
在数据的常见分布中,有一种是一对多存储的数据,即一个是key,其他改key对应的多个value.例如气象数据等,每天有很多组,又或者是一个球员,他每天得多少分等等.我做这个东西有三种方法,即:常规编程 ...
- 9.13noip模拟试题
题目名称 “与” 小象涂色 行动!行动! 输入文件 and.in elephant.in move.in 输出文件 and.out elephant.in move.in 时间限制 1s 1s 1s ...
- Wpf Hyperlink超链接控件使用
一.在Windows窗口中使用 1.点击链接使用系统默认游览器打开 <TextBlock Margin="10,20,-10,-20"> 默认: <Hyperli ...
- Ext checkbox
Ext.require([ 'Ext.grid.*', 'Ext.data.*', 'Ext.util.*', 'Ext.grid.PagingScroller', ...
- (转)PHP的ereg()与eregi()的不同及相同点。对比
ereg() 字符串比对解析. 语法: int ereg(string pattern, string string, array [regs]); 返回值: 整数/数组 函数种类: 资料处理 内容说 ...
- PHP magic_quotes_gpc的详细使用方法
工作中遇到的代码 if (ini_get('magic_quotes_gpc')) { function stripslashesRecursive(array $array){ foreach ($ ...