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

分享淘宝滚动图片的代码

放大字体  缩小字体 发布日期:2024-02-25 21:58:30  来源:电商联盟  作者:乐发网  浏览次数:23

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

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

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

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

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

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

分享与收藏:  网商学院搜索  告诉好友  关闭窗口  打印本文 本文关键字:
 
更多..资源下载
淘宝店铺装修图文
淘宝装修子账号设置流程 淘宝店铺,天猫店铺背景固定的方法。
淘宝店铺装修如何实现全屏轮播
淘宝店铺装修网商学院推荐
淘宝店铺装修点击排行
 
手机版 手机扫描访问