图片的动态变化

<div style=" font-size:14px; line-height:18px; margin-bottom:10px"><strong>成功案例</strong></div>
<div id="hotImg" style="width: 235px; height: 252px; border: 0px" class="hotImg">

<script language="javascript" type="text/javascript">
function HtmlDecode(text){
return text.replace(/&amp;/g,'&').replace(/&quot;/g,'\"').replace(/&lt;/g,'<').replace(/&gt;/g,'>')}
function XTopMap(w, h, strTopMap){
var m_TopImgs = new Array();
var m_w = w;
var m_h = h;
var addW = 2;

var m_nowPic = 0;
var m_hTimer;
var m_strTopMap = strTopMap;

this.TopImgItem = function (imgUrl, strUrl, strText){
this.img = new Image();
this.img.src = imgUrl;

this.strText = HtmlDecode(strText);
}

this.AddImgItem = function (strUrl, imgUrl, strText){
m_TopImgs[m_TopImgs.length] = new this.TopImgItem(imgUrl, strUrl, strText);
}

this.Length = function(){
return m_TopImgs.length;
}

this.GetTopImgItem = function(l){
return m_TopImgs[l];
}

this.change_img = function(){
if(!m_nowPic){
m_nowPic = 1;
}
document.getElementById(m_strTopMap + "_pic").src = m_TopImgs[m_nowPic-1].img.src;

for (var i=1;i<=m_TopImgs.length;i++){
document.getElementById(m_strTopMap + "_xxjdjj"+i).className='';
}
document.getElementById(m_strTopMap + "_xxjdjj"+m_nowPic).className='here';
m_nowPic++;
if( m_nowPic > m_TopImgs.length ){m_nowPic = 1}
hTimer = setTimeout('eval("'+m_strTopMap+'.change_img()")', 3000);
}

this.imgClick = function(n){
m_nowPic = n;
window.clearInterval(hTimer);
this.change_img();
}

this.show = function(){
document.write('<div id="imgShow" class="imgShow">');
document.write('<div><a id="' + m_strTopMap + '_url" target="_blank"><img id="'+m_strTopMap + '_pic" style="filter:progid:DXImageTransform.Microsoft.RevealTrans (duration=0,transition=23)" width='+m_w+' height='+m_h+' /></a></div>');
document.write('<div id="imgNum" class="imgNum"><div>');
for(var i=1;i<m_TopImgs.length+1;i++){
document.write('<a href="javascript:'+m_strTopMap+'.imgClick('+i+');" id="'+m_strTopMap+'_xxjdjj'+i+'">'+i+'</a>');
}
document.write('</div></div></div>');
}

}

TopMap1 = new XTopMap(235, 235, "TopMap1");
var TopMap = TopMap1;
TopMap.AddImgItem('', '../../Content/example/200908280759-01113-545.jpg', 'aa');
TopMap.AddImgItem('/b1066028/d88294872.htm', '../../Content/example/200908280275-01176-381.jpg', '时尚生活');
TopMap.AddImgItem('/b1066028/d88294872.htm', '../../Content/example/200908280995-01143-849.jpg', '精彩人生');
TopMap.AddImgItem('/b7068322/d88255901.htm', '../../Content/example/200909010205-01203-195.jpg', '时尚生活');
TopMap.AddImgItem('/b1053654/d88279858.htm', '../../Content/example/200909040047-01242-549.jpg', '运动，无处不在！');

TopMap.show();
TopMap.change_img();
</script>

</div>

样式文件：

/*xinzhouc*/
.hotImg box{border:1px solid #c9d3df}
.hotImg {float:left;position:relative;width:315px}
.hotImg a{text-decoration:none}
.hotImg a:hover{text-decoration:underline}
.imgShow {width:235;height:235px;margin:0 auto;margin:1px}
.imgShow img{width:235px;height:235px}
.imgNum {position:absolute;bottom:31px;right:0px;width:235px;height:0px}
.imgNum div{text-align:right}

.imgNum a{display:inline-block;width:20px;height:14px;line-height:14px;margin-left:2px;text-align:center;font:10px tahoma,MingLiu;color:#fff;background-color:#555}
.imgNum a:hover{background-color:#f90;text-decoration:none}
.imgNum a.here{background-color:#f90;text-decoration:none}
imgTitle {position:absolute;bottom:1px;right:1px;width:235px;height:26px}
imgTitle .titbg{width:100%;height:26px;background-color:#eee;}

图片效果: