淘宝店铺的推广中,如何让你的图片会说话?淘宝学堂和你来一起做淘宝滚动图片的代码。
<!------------------ 向左滚动代码开始 -------------------------->
<div id=demo style="overflow:scroll;height:93;width:600;background:#214984;color:#ffffff" >
<table align=left cellpadding=0 cellspacing=0 border=0>
<tr>
<td id=demo1 valign=top><img src="1-1.jpg" width="102" height="77" border="0" /><img src="2-1.jpg" width="102" height="77" border="0" /><img src="3-1.jpg" width="102" height="77"border="0" /><img src="4-1.jpg" width="102" height="77"border="0" /><img src="5-1.jpg" width="102" height="77"border="0" /><img src="6-1.jpg" width="102" height="77"border="0" /></td>
<td id=demo2 valign=top"></td>
</tr>
</table>
</div>
<script type="text/javascript">
var speed=30 //速度(单位:毫秒,1秒=1000毫秒)
demo2.innerHTML=demo1.innerHTML //将第二个储存格的空内容使用和第一格一样的内容填充
function Marquee(){
if(demo1.offsetWidth-demo.scrollLeft<=0) //假如图片走到第一个储存格完
demo.scrollLeft-=demo2.offsetWidth // 这时候重新从第一格第一张图片开始走动
else{ //否则
demo.scrollLeft++ // 滚动条一直向左滚动
}
}
var MyMar=setInterval(Marquee,speed) //以时间speed为间隔逐次调用滚动条函数
demo.onmouseover=function() {clearInterval(MyMar)} //鼠标放上的时候解除对滚动函数的调用
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//移开则重新调用滚动函数
</script>
<!------------------ 向右滚动代码开始 -------------------------->
<div id=demoRight style="overflow:hidden;height:77;width:600;background:#000000;color:#ffffff;border:5px none #000000;">
<table align=left cellpadding=0 cellspacing=0 border=0>
<tr>
<td id=demoRight1 valign=top><img src="1-1.jpg" width="102" height="77" border="0" /><img src="2-1.jpg" width="102" height="77" border="0" /><img src="3-1.jpg" width="102" height="77"border="0" /><img src="4-1.jpg" width="102" height="77"border="0" /><img src="5-1.jpg" width="102" height="77"border="0" /><img src="6-1.jpg" width="102" height="77"border="0" /><img src="7-1.jpg" width="102" height="77"border="0" /><img src="8-1.jpg" width="102" height="77" border="0" /></td>
<td id=demoRight2 valign=top></td>
</tr>
</table>
</div>
<script type="text/javascript">
var speed_Right=30
demoRight2.innerHTML=demoRight1.innerHTML
demoRight.scrollLeft = demoRight1.offsetWidth
function Marquee_Right(){
if(demoRight.scrollLeft<=0)
demoRight.scrollLeft+=demoRight1.offsetWidth
else{
demoRight.scrollLeft--
}
}
var MyMar_Right=setInterval(Marquee_Right,speed_Right)
demoRight.onmouseover=function(){clearInterval(MyMar_Right)}
demoRight.onmouseout=function() {MyMar_Right=setInterval(Marquee_Right,speed_Right)}
</script>
乐发网超市批发网提供超市货源信息,超市采购进货渠道。超市进货网提供成都食品批发,日用百货批发信息、微信淘宝网店超市采购信息和超市加盟信息.打造国内超市采购商与批发市场供应厂商搭建网上批发市场平台,是全国批发市场行业中电子商务权威性网站。
本文来源: 分享淘宝滚动图片的代码