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%{ /*可以依据不 ...
随机推荐
- nodejs这个过程POST求
下面是一个web登陆模拟过程.当我们问一个链接,你得到一个表格,然后填写相应的表格值,然后提交登陆. var http = require('http'); var querystring = req ...
- Java数学表示式解析工具- jeval
这个包能够为我们提高高效的数学表达式计算. 举个样例:这个是我们策划给出的游戏命中率的一部份计算公式 是否命中=a命中率 – (b等级 – a等级) * (命中系数(6)* b闪避率 / 100)+3 ...
- CSS控制LI行字符溢出用省略号取代
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- spring 中StoredProcedure的用法--转载
StoredProcedure是一个抽象类,必须写一个子类来继承它,这个类是用来简化JDBCTemplate执行存储过程操作的. 首先我们写一个实现类: package com.huaye.frame ...
- RxJava RxAndroid【简介】
资源 RxJava:https://github.com/ReactiveX/RxJava RxAndroid :https://github.com/ReactiveX/RxAndroid 官网:h ...
- IntentFilter
当Intent在组件间传递时,组件如果想告知Android系统自己能够响应和处理哪些Intent,那么就需要用到IntentFilter对象. 顾名思义,IntentFilter对象负责过滤掉组件无法 ...
- Android中的缓存机制与实现
分步阅读 Android开发本质上就是手机和互联网中的web服务器之间进行通信,就必然需要从服务端获取数据,而反复通过网络获取数据是比较耗时的,特别是访问比较多的时候,会极大影响了性能,Android ...
- js监听滚动条事件
(function () { if(document.addEventListener){ document.addEventListener('mousewheel',scrollFunc,fals ...
- FFMPEG 截取RTMP直播流图片命令
CentOS 6.5 yum安装FFMPEG步骤 1. 手动添加yum源配置 vi /etc/yum.repos.d/dag.repo [dag] name=Dag RPM Repository ...
- Maven Profile标签
Maven Profiles标签可以针对不同的环境来使用不同的配置文件 在发布的时候可以用 mvn release -p product mvn release -p test mvn release ...