【转】图片动态切换的实现

来源：互联网发布：mac图片另存为快捷键编辑：程序博客网时间：2024/05/17 22:08

一个朋友叫帮忙实现一个图片动态切换的导航，感觉很迷茫，平时看了很多，但是真正去实现，还没做过。

幸好，同事给了一个demo，分享一下。

<!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>