图片的动态变化

<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;}

 

 

 

图片效果: