图片切换_var revealtrans = class.create();-优快云博客

本文链接：https://blog.youkuaiyun.com/smallfools/article/details/4298182

有一两周没来博客了，这段时间比较忙，除了出差去了一次成都之外，还写了一个网站，在网站的首页使用到了图片切换的效果。这个图片切换是使用JavaScript来编写的。本想自己写一个，但一时犯懒，就从网上找了一个，改了改就用上了。用上之后发现效果不错。天下文章一大抄，看你会抄不会抄了。先记下来，说不定哪天需要使用时还能用呢。

原文件的代码如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>图片切换效果</title> </head> <body> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">.container{ width:280px; height:200px; border:1px solid #eee; position:relative; } #idPicText{ background:#eee; line-height:25px; text-align:center; font-weight:bold; width:282px; white-space:nowrap; overflow:hidden; font-size:12px; } #idPicText a{ text-decoration:none; color:#333; display:block; } #idPicList img{ cursor:pointer; width:65px; height:50px; filter:alpha(opacity=50); -moz-opacity: .5; opacity: .5; border:0; margin:10px; } #idPicList img.on{ filter:alpha(opacity=100); -moz-opacity: 1; opacity: 1; } #idNum{ position:absolute; right:5px; bottom:5px;} #idNum li{ float: left; list-style:none; color: #fff; text-align: center; line-height: 16px; width: 16px; height: 16px; font-family: Arial; font-size: 12px; cursor: pointer; margin: 1px; border: 1px solid #707070; background-color: #060a0b; } #idNum li.on{ line-height: 18px; width: 18px; height: 18px; font-size: 14px; border: 0; background-color: #ce0609; font-weight: bold; }</style> <mce:script type="text/javascript"></mce:script> <div id="idShow" class="container"> </div> <div id="idPicShow" class="container"> <ul id="idNum"> </ul> </div> <div id="idPicText"></div> <div id="idPicList"></div> <mce:script type="text/javascript"></mce:script> </body> </html>

以上代码与实际代码有点出入，源文件下载地址为：http://www.aspxfans.com/myBlogFile/图片切换1.rar 或 http://download.youkuaiyun.com/source/1964518

但原文件中显示的内容过多，我修改了一下，修改代码如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>图片切换效果</title> </head> <body> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">.container{ width:280px; height:200px; border:1px solid #eee; position:relative; } #idPicText{ background:#eee; line-height:25px; text-align:center; font-weight:bold; width:282px; white-space:nowrap; overflow:hidden; font-size:12px; } #idPicText a{ text-decoration:none; color:#333; display:block; } #idPicList img{ cursor:pointer; width:65px; height:50px; filter:alpha(opacity=50); -moz-opacity: .5; opacity: .5; border:0; margin:10px; } #idPicList img.on{ filter:alpha(opacity=100); -moz-opacity: 1; opacity: 1; } #idNum{ position:absolute; right:5px; bottom:5px;} #idNum li{ float: left; list-style:none; color: #fff; text-align: center; line-height: 16px; width: 16px; height: 16px; font-family: Arial; font-size: 12px; cursor: pointer; margin: 1px; border: 1px solid #707070; background-color: #060a0b; } #idNum li.on{ line-height: 18px; width: 18px; height: 18px; font-size: 14px; border: 0; background-color: #ce0609; font-weight: bold; }</style> <mce:script language="javascript" type="text/javascript"></mce:script> <div id="idPicShow" class="container"> <ul id="idNum"></ul> </div> <div id="idPicText"></div> <div id="idPicList"></div> <mce:script language="javascript"></mce:script> </body> </html>

以上代码与实际代码有点出入，源文件下载地址为：http://www.aspxfans.com/myBlogFile/图片切换2.rar 或 http://download.youkuaiyun.com/source/1962490