<!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. Enterprise Library 服务问题

    在使用Enterprise Library而没有注册服务的时候会出现这样的问题,"Editing Post "Failed to create instances of perfo ...

  2. xmlBean学习二

    由上一遍的准备工作完成后,可以很简单的就进行对xml文件的操作, package com; import java.io.File; import java.io.IOException; impor ...

  3. hadoop 关闭进程时报错no 进程 to stop

    前两天和朋友李天王吃饭的时候,聊到了一个hadoop的运维的很简单问题,感觉很有意思,以前也没有注意过,现在加以重现和整理.   感谢李天王的分享....   翻看了yarn-deamon.sh st ...

  4. 搜狐cache文件夹设置

    比如说本来sohucache放在E盘,你想改到D盘.第一步:在运行中打开regedit,在弹出的HKEY_CURRENT_USER选中Software第二步:再选中SOHU再选中SoHuVA再选中Ca ...

  5. 汇编语言（学习笔记----寄存器CPU互作原理）

    一.段寄存器 1.段寄存器就是提供段地址的,8086CPU有4个段寄存器:CS(代码段寄存器),DS(数据段寄存器),SS(堆栈段寄存器),ES(附加段寄存器) 2.当8086CPU要访问内存时,由这 ...

  6. 手机调用系统的拍照和裁剪功能，假设界面有输入框EditText，在一些手机会出现点击EditText会弹出输入法，却不能输入的情况。

    1. 拍照裁剪后 点击EditText会弹出输入法,却不能输入.可是点击点一EdtiText就能够输入了,所以我就写了一个看不见的EdtiText,切换焦点,这样就攻克了这个奇怪的这问题,应该是and ...

  7. [Angular-Scaled Web] 8. Using $http to load JSON data

    Using the $http service to make requests to remote servers. categories-model.js: angular.module('egg ...

  8. MySQL查询优化--细节理论

    select的 high_priority还是比较有用,在实践中,平均5~6秒提高到3秒 ======================================================= ...

  9. Ng-include 例子

    <body> <div ng-app="myApp"> <div ng-controller="firstController"& ...

  10. Spark Streaming metadata checkpoint

    Checkpointing 一个流应用程序必须全天候运行,所有必须能够解决应用程序逻辑无关的故障(如系统错误,JVM崩溃等).为了使这成为可能,Spark Streaming需要checkpoint足 ...