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%{ /*可以依据不 ...
随机推荐
- PHP安全编程：跨站脚本攻击的防御(转)
跨站脚本攻击是众所周知的攻击方式之一.所有平台上的Web应用都深受其扰,PHP应用也不例外. 所有有输入的应用都面临着风险.Webmail,论坛,留言本,甚至是Blog.事实上,大多数Web应用提供输 ...
- Swift 算法实战之路：基本语法与技巧
Swift是苹果新推出的编程语言,也是苹果首个开源语言.相比于原来的Objective-C,Swift要更轻便和灵活.笔者最近使用Swift实践了大量的算法(绝大部分是硅谷各大公司的面试题),将心得体 ...
- Android四大图片缓存（Imageloader,Picasso,Glide,Fresco）原理、特性对比
四大图片缓存基本信息 Universal ImageLoader 是很早开源的图片缓存,在早期被很多应用使用. Picasso 是 Square 开源的项目,且他的主导者是 JakeWharton,所 ...
- [转]Vim 复制粘帖格式错乱问题的解决办法
有时候,复制文本(尤其是代码)到 Vim,会出现格式错乱的问题.看样子,应该是自动缩进惹得祸.本文不去深究原因,直接给出解决方法. 1. paste 模式 运行如下命令,进入 paste 模式: :s ...
- Poj 3368 Frequent values
/* 线段树区间合并 维护几个信息 到时候乱搞一下就好了 开始T了 有一种情况可以不用递归 直接算出来 */ #include<iostream> #include<cstdio&g ...
- poj 1201 Interval （查分约束）
/* 数组开大保平安. 查分约束: 输入的时候维护st和end 设每个点取元素di个 维护元素个数前缀和s Sbi-Sai-1>=ci 即:建立一条从ai-1到bi的边 权值为ci 表示ai到b ...
- codevs 4909 寂寞的堆（写的好丑0.0）
#include<iostream> #include<cstdio> #include<cstring> #include<cmath> #defin ...
- document.all用法
document.all用法 一. document.all是页面内所有元素的一个集合.例如: document.all(0)表示页面内第一个元素二.document.all可以判断浏览器 ...
- spring-data-mongodb查询结果返回指定字段
方法1 DBObject dbObject = new BasicDBObject(); dbObject.put("status", 1); DBObject field ...
- (转)PHP模板smarty简单入门教程
转之--http://blog.163.com/zf_2011@126/blog/static/166861361201062595057962/ 如何在smarty中开始我们程序设计.PHP代码:- ...