公告:唯艺客户端火爆上线,模板自动安装,国际安全认证~
马上注册,领取百套精美模板(永久免费) 个人中心 | 下载客户端 | 客户服务 | 登录 | 注册
您所在的位置:淘宝装修教程 > 淘宝装修代码

店铺装修如何添加滚动图片的代码

2015-08-06 04:55:43

        比起静态的东西,动态的东西总是更吸引人,网店装修中也是如此。如何在店铺装修中设置滚动图片的代码唯艺网店装修平台整理了一些代码信息,大家一起来看一下。


        首先,我们来看下向左边滚动的代码:

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

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

        也许对于新手卖家来说,这一连串的字符看不太懂。其实只要把图片找好上传,再把代码复制粘贴进去就OK了。找图片时,切忌超出淘宝限制的图片尺寸大小,不然会出现图片变形,甚至无法设置的情况。

        本文出自唯艺网店装修平台(www.weiyi5.cc,转载请注明出处!


0

相关教程

懒人专区:淘宝模板-免费安装查看更多>

  • 活泼绚丽 清新蓝色 户外包包淘宝模板

    活泼绚丽 清新蓝色 户外包包淘宝模板

    人气:39477
  • 好茶汇聚 素雅浅色 食品保健淘宝模板

    好茶汇聚 素雅浅色 食品保健淘宝模板

    人气:30571
  • 复古欧美 胶片暗青 创意灯饰淘宝模板

    复古欧美 胶片暗青 创意灯饰淘宝模板

    人气:1
  • 潮流复古  极致简约  个性服饰淘宝模板

    潮流复古 极致简约 个性服饰淘宝模板

    人气:0
  • 时尚女鞋 米色暖黄 女鞋精品淘宝模板

    时尚女鞋 米色暖黄 女鞋精品淘宝模板

    人气:31597
  • 大牌简约 大气背景 珠宝配饰网店模板

    大牌简约 大气背景 珠宝配饰网店模板

    人气:38768
  • 春天衣橱 精品酷黑 潮流男装淘宝模板

    春天衣橱 精品酷黑 潮流男装淘宝模板

    人气:59832
  • 时尚美容美妆馆

    时尚美容美妆馆

    人气:0