快消品货源批发市场
快消品货源分销平台
 
 
当前位置: 货源批发网 » 网商学院 » 网店装修 » 淘宝店铺装修 » 分享淘宝滚动图片的代码

分享淘宝滚动图片的代码

放大字体  缩小字体 发布日期:2026-06-23 15:47:20  来源:电商联盟  作者:乐发网  浏览次数:26

淘宝店铺的推广中,如何让你的图片会说话?淘宝学堂和你来一起做淘宝滚动图片的代码。

<!------------------ 向左滚动代码开始 -------------------------->

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

快消品货源网提供超市货源信息,超市采购进货渠道。超市进货网提供成都食品批发,日用百货批发信息、微信淘宝网店超市采购信息和超市加盟信息.打造国内超市采购商与批发市场供应厂商搭建网上批发市场平台,是全国批发市场行业中电子商务权威性网站。

本文内容整合网站:百度百科知乎淘宝平台规则

本文来源: 分享淘宝滚动图片的代码

分享与收藏:  网商学院搜索  告诉好友  关闭窗口  打印本文 本文关键字:
 
更多..资源下载
淘宝店铺装修图文
如何运用图片轮播功能动态展示天猫商品? 淘宝图片护盾许可名单如何设置?
淘宝网店装修8个误区,哪个你经常犯? 去空白间隙全屏装修代码分享
淘宝店铺装修网商学院推荐
淘宝店铺装修点击排行
 
手机版 手机扫描访问