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

网店装修的滚动图片代码

2015-07-24 03:16:06

        店铺装修免不了要使用图片,动态的图片,远比静态的图片更具吸引力。在网店装修中,也少不了代码,那么滚动图片的代码是什么呢?唯艺网店装修平台整理了一些相关的代码,大家一起来看一下吧。

 

        图片滚动的方向一般是两个:向左和向右。滚动的图片,其实也是店铺推广方式的一种表现。我们先来看看向左滚动的代码:

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

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

 

          其实店铺装修中要使用的代码非常多,虽然网上也有一些现成的模板,卖家可以直接拿来用。但是想要做具有自己特色的店铺装修,还是要多学学习一些相关的教程。

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


0

相关教程

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

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

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

    人气:39477
  • 中国风 佛缘手珠 饰品珠宝淘宝模板

    中国风 佛缘手珠 饰品珠宝淘宝模板

    人气:30549
  • 春季、夏季清爽 化妆美容、健美店铺模板 全屏轮播

    春季、夏季清爽 化妆美容、健美店铺模板 全屏轮播

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

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

    人气:59832
  • 日用杂货 清新简约 生活兴趣网店模板

    日用杂货 清新简约 生活兴趣网店模板

    人气:45643
  • 奢侈名表 简约奢华 饰品珠宝淘宝模板

    奢侈名表 简约奢华 饰品珠宝淘宝模板

    人气:38980
  • 活力欧美 帅气男装 服装配件淘宝模板

    活力欧美 帅气男装 服装配件淘宝模板

    人气:40233
  • 时尚简约 鞋帽箱包 珠宝配饰淘宝模板

    时尚简约 鞋帽箱包 珠宝配饰淘宝模板

    人气:56789