图片切换

来源：互联网发布：网络公墓编辑：程序博客网时间：2024/06/10 04:52

有一两周没来博客了，这段时间比较忙，除了出差去了一次成都之外，还写了一个网站，在网站的首页使用到了图片切换的效果。这个图片切换是使用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.csdn.net/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.csdn.net/source/1962490