<!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. Centos6.3 jekyll环境安装

    yum install ruby yum install rubygems yum install ruby-devel gem install rdiscount yum install pytho ...

  2. 安装centreon

     Centreon + nagios + ndoutils 安装 2013-09-25 19:42:44 标签:centreon 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者 ...

  3. IT项目管理工具总结(转载)

    以前用过一个cs版的忘记叫啥名了,还用个禅道,感觉一般“5. 测试管理: 项目软件缺陷Bug状态跟踪”在公司内部自己测试或者试用期上线后后期维护阶段用的多,有的公司单独做个系统让用户提问题来修改,也是 ...

  4. 一个奇怪的html上url参数问题

    今天踩了一个坑  如xxx.com/xxx/xxx?code=+adfdf  我需要拿到 code=+adfdf 但是后台拿到的是 adfdf, 后来只能对 code的值进行 urlencode处理了

  5. delphi label1 文字在窗体上水平来回移动

    //文字在窗体上水平来回移动 procedure TForm1.Timer1Timer(Sender: TObject);{ Timer1.Interval:=10;}begin  if label1 ...

  6. [Javascript] IO Functor

    IO functor doesn't like Maybe(), Either() functors. Instead of get a value, it takes a function. API ...

  7. ios--uitextfield动态限制输入的字数(解决方式)

    1.定义一个事件: -(IBAction)limitLength:(UITextField *)sender { bool isChinese;//推断当前输入法是否是中文 if ([[[UIText ...

  8. 升级Flash Builder 4.7中的AIR SDK

    原文地址:http://helpx.adobe.com/flash-builder/kb/overlay-air-sdk-flash-builder.html本文并没有“忠于”原文翻译. Flash ...

  9. 出错处理完美搭配之perror&exit

    对于库函数出错处理有两个十分有用的函数perror和exit: 一.错误报告 perror函数用一种简单统一的方式报告错误.ANSI C中的许多库函数,尤其是I/O函数,会调用操作系统去执行一些工作. ...

  10. Linux(Debian) vps安装gnome桌面+VNC

      昨天转载了一篇关于在Linux VPS上安装xface桌面并VNC连接的文章,因为文章是基于CentOS系统来操作的,有热心读者希望有一个Debian下的类似的东西,这就促成了今天的这篇文字.需要 ...