js实现商城网站产品图片定时向上滚动展示

主页 M

js实现商城网站产品图片定时向上滚动展示

2016-11-24 网页编程网 网页编程网

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

    <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);
}
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]);
}
}
</script>
      <script type="text/javascript">initMarquee1();</script>
      <div class="clear"></div>
      </div>
    </div>
 </div>

阅读原文

阅读 4905

123 显示电脑版