<!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. iOS－图片png

    把图片添加到工程里面:就报了108个警告!!! 然后我发现我添加的图片有很多命名是这样子的: xcode去找图片的时候是按照什么方式找的呢????? 还发现有好几张同名的图片..... ------- ...

  2. Hash Table构建

    get-item e:\test\* |format-table @{name="aa";expression={$_.name.tostring().split(".& ...

  3. .net简单录音和播放音频文件代码

    本代码特点:不用DirectX ,对于C/S .B/S都适用. 方法: //mciSendStrin.是用来播放多媒体文件的API指令,可以播放MPEG,AVI,WAV,MP3,等等,下面介绍一下它的 ...

  4. [Javascript] Manipulate the DOM with the classList API

    Learn how to add, remove and test for CSS classes using the classList API. It's more powerful than u ...

  5. HDU1013_Digital Roots【大数】【水题】

    Digital Roots Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) To ...

  6. 开发者必备，超实用的PHP代码片段(转)

    此前,研发频道曾发布<直接拿来用,10个PHP代码片段>,得到了网友们的一致好评.本文,笔者将继续分享九个超级有用的PHP代码片段.当你在开发网站.应用或者博客时,利用这些代码能为你节省大 ...

  7. 将 Discuz X3 手机版默认的“标准版”改为“触屏版”

    修改前请备份原文件   1.找到“\source\class\discuz\discuz_application.php”,将其中的   'mobiletpl' => array('1' =&g ...

  8. 内核工具 – Sparse 简介

    转载:http://www.cnblogs.com/wang_yb/p/3575039.html Sparse是内核代码静态分析工具, 能够帮助我们找出代码中的隐患. 主要内容: Sparse 介绍 ...

  9. Android（java）学习笔记113：Android编写代码调用Vibrator震动功能（Bug：按下按钮button始终没有震动）

    1.之前我编写的代码是如下: package com.himi.vibrate; import android.app.Activity; import android.app.Service; im ...

  10. Android（java）学习笔记94：关于广播接收者的注册和使用心得

    下面我们先看一部分代码,由代码进行进一步的深入: registerReceiver( new BroadcastReceiver() {//onReceive中代码的执行时间不要超过5s,androi ...