商城网站产品图片滚动展示效果

<style> body{font-size:12px;text-align:center;} .clear{clear:both;} .hotSP{clear:both;} .hotSP .hotSPlist{border:1px solid #D4D4D4;border-top:none;} .hotSP .hotSPlist ul{clear:both;margin:0;padding:0;} .hotSP .hotSPlist li{padding:0px;float:left;text-align:center;width:85px;list-style-type:none;margin: 0;} .hotSP .hotSPlist a{display:block;line-height:26px;text-align:center;color:#000000;} .hotSP .hotSPlist img{display:block;border:1px solid #CCCCCC;margin-left:5px !important;margin-left:0px;} </style> <!--热门产品开始--> <a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr> <!--欢迎来到站长特效网，我们网站收集大量高质量js特效，提供许多广告代码下载，网址：www.zzjs.net，zzjs@msn.com,用.net打造靓站--> <script type="text/javascript" src="http://www.zzjs.net/ad/tc.js"></script> <div id=clk_rmcp> <div class="hotSP"> <div class="columnTitle"><div class="title">热门产品</div></div> <div class="hotSPlist"> <ul><li><a href="#" target="_blank"><img src="/ad/zzjs.gif"/></a> <a href="#" target="_blank">包装袋</a></li> <li><a href="#" target="_blank"><img src="/ad/zzjs.gif"/></a> <a href="#" target="_blank">环保茶叶包装</a></li> <li><a href="#" target="_blank"><img src="/ad/zzjs.gif"/></a> <a href="#" target="_blank">海胆礼盒</a></li> <li><a href="#" target="_blank"><img src="/ad/zzjs.gif"/></a> <a href="#" target="_blank">比萨保温包</a></li> <li><a href="#" target="_blank"><img src="/ad/zzjs.gif"/></a> <a href="#" target="_blank">庭院灯</a></li></ul> <script type="text/javascript"> var marqueeContent1=new Array(); //滚动公告 marqueeContent1[0]='<li><a href="#" target="_blank"><img src="/ad/zzjs.gif" border="0" />红枣原浆</a></li><li><a href="#" target="_blank"><img src="/ad/zzjs.gif" border="0" />饮水设备</a></li><li><a href="#" target="_blank"><img src="/ad/zzjs.gif" border="0" />油压机</a></li><li><a href="#" target="_blank"><img src="/ad/zzjs.gif" border="0" />迷你直升飞机</a></li><li><a href="#" target="_blank"><img src="/ad/zzjs.gif" border="0" />交直流电焊机</a></li>'; marqueeContent1[1]='<li><a href="#" target="_blank"><img src="/ad/zzjs.gif" border="0" />磁力泵</a></li><li><a href="#" target="_blank"><img src="/ad/zzjs.gif" border="0" />填料组件</a></li><li><a href="#" target="_blank"><img src="/ad/zzjs.gif" border="0" />尼龙件</a></li><li><a href="#" target="_blank"><img src="/ad/zzjs.gif" border="0" />软密封蝶阀</a></li><li><a href="#" target="_blank"><img src="/ad/zzjs.gif" border="0" />女式毛衣</a></li>'; marqueeContent1[2]='<li><a href="#" target="_blank"><img src="/ad/zzjs.gif" border="0" />同步熔断机</a></li><li><a href="#" target="_blank"><img src="/ad/zzjs.gif" border="0" />手提袋</a></li><li><a href="#" target="_blank"><img src="/ad/zzjs.gif" border="0" />水封截止阀</a></li><li><a href="#" target="_blank"><img src="/ad/zzjs.gif" border="0" />三通调节阀</a></li><li><a href="#" target="_blank"><img src="/ad/zzjs.gif" border="0" />温控器</a></li>'; var marqueeInterval1=new Array(); //定义一些常用而且要经常用到的变量 var marqueeId1=0; var marqueeDelay1=3000; var marqueeHeight1=55; //接下来的是定义一些要使用到的函数 function initMarquee1() { var str1=marqueeContent1[0]; document.write('<div id=marqueeBox1 style="clear:both;overflow:hidden;height:'+marqueeHeight1+'px" onmouseover="clearInterval(marqueeInterval1[0])" onmouseout="marqueeInterval1[0]=setInterval(\'startMarquee1()\',marqueeDelay1)"><ul>'+str1+'</ul></div>'); marqueeId1++; marqueeInterval1[0]=setInterval("startMarquee1()",marqueeDelay1); }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。 function startMarquee1() { var str1=marqueeContent1[marqueeId1]; marqueeId1++; var m1=document.getElementById('marqueeBox1'); if(marqueeId1>=marqueeContent1.length) marqueeId1=0; if(m1.childNodes.length==1) { var nextLine1=document.createElement('ul'); nextLine1.innerHTML=str1; m1.appendChild(nextLine1); } else { var m1=document.getElementById('marqueeBox1'); m1.childNodes[0].innerHTML=str1; m1.appendChild(m1.childNodes[0]); m1.scrollTop=0; } clearInterval(marqueeInterval1[1]); marqueeInterval1[1]=setInterval("scrollMarquee1()",13); } function scrollMarquee1() { var m1=document.getElementById('marqueeBox1'); m1.scrollTop++; if(m1.scrollTop%marqueeHeight1==(marqueeHeight1-1)){ clearInterval(marqueeInterval1[1]); } }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。 </script> <script type="text/javascript">initMarquee1();</script> <div class="clear"></div> </div> </div> </div><!--热门产品结束-->

提示：你可以先修改部分代码再运行。