<!doctype html>
<title>javascript图片轮换</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript图片轮换" />
<meta name="description" content="javascript图片轮换" />
<style type="text/css">
#album{/*相册*/
position:relative;
width:500px;
height:400px;
border:2px solid #EFEFDA;/*相册边框*/
}
#album dt {/*相册的内容显示区，包含相片与下面的翻页栏*/
margin:0;/*去除浏览器的默认设置*/
padding:0;/*去除浏览器的默认设置*/
width:500px;
height:400px;
overflow:hidden;/*重点，让每次只显示一张图片*/
}
#album img {
border:0px;
}
#album dd {/*翻页栏*/
position:absolute;
right:0px;
bottom:10px;
}
#album a {
display:block;/*让其拥有盒子模型*/
float:left;
margin-right:10px;/*错开格子*/
width:15px;/*呈正方形*/
height:15px;
line-height:15px;
text-align:center;/*居中显示*/
text-decoration:none;/*消除下划线*/
color:#808080;
background:transparent url(http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_button.gif) no-repeat -15px 0;
}
#album a:hover ,#album a.hover{
color:#F8F8F8;
background-position:0 0;
}
</style>
<h2>javascript图片轮换</h4>
<dl id="album">
<dt>
<img id="index1"

src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828701/o_6_600x1024.jpg" />
<img id="index2"
src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828701/o_ooYBAFHjlzGIJCihAARx8LD6EP0AAAvjgNOhv4ABHII776.jpg" />
<img id="index3"
src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828701/o_QQ%e5%9b%be%e7%89%8720160502191026.jpg" />
<img id="index4"
src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828701/o_QQ%e5%9b%be%e7%89%8720160502191033.jpg" />
<img id="index5"
src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828701/o_oYYBAFHjlzSIbAyvAASQp8-G3SoAAAvjgNWlJgABJC_096.jpg" />
<img id="index6"
src="http://images.cnblogs.com/cnblogs_com/caidupingblogs/828701/o_QQ%e5%9b%be%e7%89%8720160502191020.jpg" />
</dt>
<dd>
<a href="#index1">1</a><a href="#index2">2</a><a href="#index3">3</a><a href="#index4">4</a><a href="#index5">5</a><a href="#index6">6</a>
</dd>
</dl>

运行代码

JavaScript之图片轮换的更多相关文章

  1. div+css+javascript 走马灯图片轮换显示

    效果如图 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  2. Js_图片轮换

    本文介绍用javascript制作图片轮换效果,原理很简单,就是设置延时执行一个切换函数,函数里面是先设置下面的缩略图列表的白框样式,再设置上面大图的src属性,在IE中显示很正常,可是在FF中会有变 ...

  3. 使用纯生js实现图片轮换

    效果图预览. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  4. 仿FLASH的图片轮换效果

    css布局代码(test.css): body { background: #ccc;} ul { padding: 0; margin: 0;} li { list-style: none;} im ...

  5. jquery 图片轮换

    jquery 图片轮换 1.下载jquery.superslide.2.1.1.js (百度搜索) 2.下载Jquery-1.4.1.js(百度搜索下载) 准备工作好了,下面开始实现 3.html & ...

  6. jQuery仿迅雷图片轮换效果

    jQuery仿迅雷图片轮换效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  7. Jquery实现图片轮换效果

    最近在看jquery书时,看到一个比较有趣的东西:图片轮换.这里和大家分享下我看完后写的一个demo.实现图片轮换要完成三部分模块:html部分.css部分.jqury部分.下面分步详细说明.1.ht ...

  8. 前端学习 第七弹： Javascript实现图片的延迟加载

    前端学习 第七弹: Javascript实现图片的延迟加载 为了实现图片进入视野范围才开始加载首先: <img    src="" x-src="/acsascas ...

  9. JavaScript校验图片格式及大小

    <!DOCTYPE html> <html> <head> <title>JavaScript校验图片格式及大小</title> <s ...

随机推荐

  1. WinDbg x 64 使用 SOS： 无法找到运行时 DLL (clr.dll)

     http://www.datazx.cn/Forums/en-US/59aa78c9-dc05-43c8-9efe-e7b132056afc/action?threadDisplayName=win ...

  2. 剑指OFFER之调整数组顺序使奇数位于偶数前面找（九度OJ1516）

    题目描述: 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有的奇数位于数组的前半部分,所有的偶数位于位于数组的后半部分,并保证奇数和奇数,偶数和偶数之间的相对位置不变. 输入: 每个输 ...

  3. JS Math 类库介绍

    下面介绍下随机生成数的常用几个API JS 随机数生成 : 在JavaScript , 提供了生成随机数的API, Math.random() 1.Math.random() : 随机生成小数 . 生 ...

  4. Linux下通过JDBC连接Oracle,SqlServer和PostgreSQL

    今天正好需要统计三个网站栏目信息更新情况,而这三个网站的后台采用了不同的数据库管理系统.初步想法是通过建立一个小的Tomcat webapp,进而通过JDBC访问这三个后台数据库,并根据返回的数据生成 ...

  5. hadoop namenode又一次格式化以后hbase的hmaster进程启动后立即消失

    hadoop的 namenode又一次格式化以后.重新启动hbase.发现它的hmaster进程启动后立即消失,查看一大堆日志,最后在zookeeper的日志里发现例如以下问题 Unable to r ...

  6. 推荐图书-《SQL Server 2008商业智能完美解决方案》

    内容简介 <SQL Server 2008商业智能完美解决方案>介绍如何使用Microsoft SQL Server 2008开发商业智能(BI)解决方案.<SQL Server 2 ...

  7. Codeforces Round #318 [RussianCodeCup Thanks-Round] (Div. 1) A. Bear and Poker 分解

    A. Bear and Poker Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/573/pro ...

  8. [置顶] VC++界面编程之--自定义CEdit(编辑框)皮肤

    自定义编辑框是登陆界面经常用到的效果,所以我也模仿站酷网的素材做了个. 要想继承CCustomDraw来完全自绘CEdit控件,是不太可行的方案,因为一旦你完全重绘,那么你需要额外做以下几件事: 1. ...

  9. EDIT Ini写Ini配置

    EDIT Ini写Ini配置  uses IniFiles; {$R *.dfm}   function IniFileName:string; begin    Result:=ExtractFil ...

  10. ios 字典转模型

    <pre name="code" class="objc">#import <Foundation/Foundation.h> @int ...