加入国际站
返回旧版 新版反馈
关闭 评分
铜币:
剩余
* 评分才能提交噢
理由:

 | 
只看楼主


  • 0 楼#

    國産〇〇柒

    • 粉丝
      2139
    • 人气
      999
    • 积分
      75
    • 铜币
      85349

          年前有不少朋友请教这个问题,论坛上也有热心的朋友分享过类似的帖子,不少朋友反应看不太明白,有可能那些帖子对于新手来讲有些过于深奥,所以就写了这篇步骤和方法简单一些的帖子,希望能够帮助的新手朋友。
     
    前期准备工作:
    1.图片形状:准备好做轮转效果的图片,根据自己的需求,图片可以是正方形也可以是长方形,当然是要保证清晰美观的前提下,一般情况下大家用的都是正方形图片,这里我们也用正方形来做演示。
    2.图片尺寸与数量:店铺首页最大内容显示区域宽度是990PX,我们的单个图片大小制作成200X200PX,当然这个大小可以自己定义,由于图片大小不一样,所以最小图片数量也就不同,因为要保证滚动效果展示能满足横向满屏(虽然这种办法没办法满足无缝轮转,但是横向满屏还是有必要满足的),图片不宜过少,这里我们使用200X200的正方形图片,我们就保证图片数量最小为6张。
    3.代码:
    这里是按照6张滚动图片,从左至右的方式滚动的。代码中的#号换成图片地址即可。代码中的高度和宽度的限制是200X200,这个宽高值是可有可无的,建议大家加上去,有的朋友做图片的技术可能不是很好,会造成6张图片的宽高稍微有些差别,这里加上200PX的限制,可以稍微统一一下宽高,以免出现滚动图片变形(这种情况我以前见过不少,变形了会很难看的,大家可以直接复制使用下面代码)。
    <marquee direction="right" >
    <img src="#" height="200" width="200" />
    <img src="#" height="200" width="200" />
    <img src="#" height="200" width="200" />
    <img src="#" height="200" width="200" />
    <img src="#" height="200" width="200" />
    <img src="#" height="200" width="200" />
    </marquee>
    注:大家在电脑桌面上建一个文本文档,把这段代码复制到文本文档里,以便我们修改。


    如图:

    图片:02.jpg




    以上是前期准备工作,制作前必须做好以上准备工作。



    二.接下来就是开始进入阿里实际操作
    1.首先把制作的6张图片上传到图片银行里面
    图片上传到图片银行后千万不要随便删除,因为我们要引用,一旦删除,前台就没办法显示图片。
    上传图片的方法和过程就不详细说了,就跟平时上传产品图片一样。引用图片的方法如下:
    (这里我随便拿个图片演示一下,大家制作的时候使用自己上传的图片即可)

    图片:01.jpg




    我这里使用的是谷歌浏览器,有一些浏览器点击右键是不会出现“复制图片网址”这个按钮的。建议大家使用兼容性较好的谷歌浏览器。获取图片网址的方法有很多,我们这里只讲这一种最便捷的。


    2.然后我们把从图片银行中复制过来的图片地址添加到我们准备的代码中。代码放的位置就是替换掉#号,千万记住要引号保留。(这里我们演示一共加入6张图片网址,按照顺序添加替换#号即可)
    <img  src="#" height="200" width="200" />

    替换后如图:

    图片:03.jpg





    用这样的方法,依次把剩下的5张图片的网址都加入到代码中,完成后如图:


    图片:04.jpg





    到这里为止,代码部分已经制作完毕。下面开始添加代码。


    3.打开阿里装修页面,如图:

    图片:05.jpg



    点击后进入阿里装修页面首页。




    4.添加自定义装修板块

    图片:06.jpg






    点击添加后弹出如下添加板块的窗口


    图片:07.jpg





    5.把制作好的代码复制粘贴到自定义板块中。

    图片:08.jpg





    注意:这里要特别注意,代码复制进去后千万不要切换视图模式,最好别的按钮都不要动,直接点
    击“确定”按钮。不然滚动代码会被刷掉。这里是成败的关键。



    6.效果如下:

    图片:09.jpg




    总结:阿里仅仅支持简单的HTML代码,所以这种方法没办法制作无缝轮转效果。其次是制作出来的效果不支持编辑,一旦编辑轮转代码就会被刷掉,需要重新手动加入轮转代码。(有不明白的新手朋友可以加我Q,大家共同学习。)

  • 1 楼#

    名人堂de小二

    • 粉丝
      1401
    • 人气
      2622
    • 积分
      0
    • 铜币
      4553

    你造福各位外贸网友啦!

  • 2 楼#

    William+

    • 粉丝
      46
    • 人气
      657
    • 积分
      0
    • 铜币
      2544



    认认真真学习!开开心心工作!快快乐乐生活!


  • 3 楼#

    Chantel

    • 粉丝
      11
    • 人气
      291
    • 积分
      0
    • 铜币
      69

    虽然我没有权力操作主账号,但是还是很认真的看完了,为楼主的分享和技术点赞

  • 4 楼#

    國産〇〇柒

    • 粉丝
      2139
    • 人气
      999
    • 积分
      75
    • 铜币
      85349

    cn1512170439:虽然我没有权力操作主账号,但是还是很认真的看完了,为楼主的分享和技术点赞回到原帖
    哈哈 灰常感谢哈  努力!!

  • 5 楼#

    cn1056476263

    • 粉丝
      0
    • 人气
      80
    • 积分
      90
    • 铜币
      11

    向程序猿致敬

  • 6 楼#

    Very Lee

    • 粉丝
      37
    • 人气
      761
    • 积分
      0
    • 铜币
      5598


  • 7 楼#

    王胖子

    • 粉丝
      9
    • 人气
      668
    • 积分
      190
    • 铜币
      19

    谢谢楼主的分享

  • 8 楼#

    cn1510301434

    • 粉丝
      6
    • 人气
      370
    • 积分
      20
    • 铜币
      1507

    亲民高手

  • 9 楼#

    阿狸巴巴

    • 粉丝
      40
    • 人气
      735
    • 积分
      0
    • 铜币
      609

    没有权限····但是谢谢分享

  • 10 楼#

    gzsr

    • 粉丝
      1
    • 人气
      87
    • 积分
      276
    • 铜币
      11

    滚动播放做好后,播放效果不够平缓,能不能改善?还有,滚动中的图片,不能进行点击链接,只能作为展示用,能不能加上链接呢?谢谢

    我店铺的地址及做好的滚动效果:http://gzsanrong.en.alibaba.com/

  • 11 楼#

    國産〇〇柒

    • 粉丝
      2139
    • 人气
      999
    • 积分
      75
    • 铜币
      85349

    cn1056476263:向程序猿致敬回到原帖

  • 12 楼#

    cn1512094812

    • 粉丝
      3
    • 人气
      210
    • 积分
      0
    • 铜币
      93

    谢谢楼主的分享精神,虽然有点不太明白,但是收藏起来以后慢慢学习!

  • 13 楼#

    cn1501352758

    • 粉丝
      5
    • 人气
      174
    • 积分
      0
    • 铜币
      20

    楼主 好厉害,正在学习中,可是不是主号,不能实际操作

  • 14 楼#

    Julie@FCG

    • 粉丝
      18
    • 人气
      621
    • 积分
      0
    • 铜币
      475

    好厉害啊~谢谢楼主的分享,赞一个~

  • 15 楼#

    cn1512298999

    • 粉丝
      6
    • 人气
      266
    • 积分
      0
    • 铜币
      55

    谢谢分享,非常实用!

  • 16 楼#

    國産〇〇柒

    • 粉丝
      2139
    • 人气
      999
    • 积分
      75
    • 铜币
      85349

    gzsr:滚动播放做好后,播放效果不够平缓,能不能改善?还有,滚动中的图片,不能进行点击链接,只能作为展示用,能不能加上链接呢?谢谢

    我店铺的地址及做好的滚动效果:http://gzsanrong.en.alibaba.com/
    回到原帖
    1,图片可以制作的尽量不要太大,影响加载速度。
    2,控制一下滚动速度,在开头代码中加入  scrollAmount=1 scrollDelay=1 ,值可以任意修改,数越大滚动速度越快。

  • 17 楼#

    cngdemcg

    • 粉丝
      0
    • 人气
      105
    • 积分
      5
    • 铜币
      4

    多谢分享。

  • 18 楼#

    cnsinotronics

    • 粉丝
      4
    • 人气
      382
    • 积分
      242
    • 铜币
      899

    不得不说很厉害。

  • 19 楼#

    cn1511177720

    • 粉丝
      1
    • 人气
      33
    • 积分
      0
    • 铜币
      6

    好好学习  谢谢了



  •       年前有不少朋友请教这个问题,论坛上也有热心的朋友分享过类似的帖子,不少朋友反应看不太明白,有可能那些帖子对于新手来讲有些过于深奥,所以就写了这篇步骤和方法简单一些的帖子,希望能够帮助的新手朋友。
     
    前期准备工作:
    1.图片形状:准备好做轮转效果的图片,根据自己的需求,图片可以是正方形也可以是长方形,当然是要保证清晰美观的前提下,一般情况下大家用的都是正方形图片,这里我们也用正方形来做演示。
    2.图片尺寸与数量:店铺首页最大内容显示区域宽度是990PX,我们的单个图片大小制作成200X200PX,当然这个大小可以自己定义,由于图片大小不一样,所以最小图片数量也就不同,因为要保证滚动效果展示能满足横向满屏(虽然这种办法没办法满足无缝轮转,但是横向满屏还是有必要满足的),图片不宜过少,这里我们使用200X200的正方形图片,我们就保证图片数量最小为6张。
    3.代码:
    这里是按照6张滚动图片,从左至右的方式滚动的。代码中的#号换成图片地址即可。代码中的高度和宽度的限制是200X200,这个宽高值是可有可无的,建议大家加上去,有的朋友做图片的技术可能不是很好,会造成6张图片的宽高稍微有些差别,这里加上200PX的限制,可以稍微统一一下宽高,以免出现滚动图片变形(这种情况我以前见过不少,变形了会很难看的,大家可以直接复制使用下面代码)。
    <marquee direction="right" >
    <img src="#" height="200" width="200" />
    <img src="#" height="200" width="200" />
    <img src="#" height="200" width="200" />
    <img src="#" height="200" width="200" />
    <img src="#" height="200" width="200" />
    <img src="#" height="200" width="200" />
    </marquee>
    注:大家在电脑桌面上建一个文本文档,把这段代码复制到文本文档里,以便我们修改。


    如图:

    图片:02.jpg




    以上是前期准备工作,制作前必须做好以上准备工作。



    二.接下来就是开始进入阿里实际操作
    1.首先把制作的6张图片上传到图片银行里面
    图片上传到图片银行后千万不要随便删除,因为我们要引用,一旦删除,前台就没办法显示图片。
    上传图片的方法和过程就不详细说了,就跟平时上传产品图片一样。引用图片的方法如下:
    (这里我随便拿个图片演示一下,大家制作的时候使用自己上传的图片即可)

    图片:01.jpg




    我这里使用的是谷歌浏览器,有一些浏览器点击右键是不会出现“复制图片网址”这个按钮的。建议大家使用兼容性较好的谷歌浏览器。获取图片网址的方法有很多,我们这里只讲这一种最便捷的。


    2.然后我们把从图片银行中复制过来的图片地址添加到我们准备的代码中。代码放的位置就是替换掉#号,千万记住要引号保留。(这里我们演示一共加入6张图片网址,按照顺序添加替换#号即可)
    <img  src="#" height="200" width="200" />

    替换后如图:

    图片:03.jpg





    用这样的方法,依次把剩下的5张图片的网址都加入到代码中,完成后如图:


    图片:04.jpg





    到这里为止,代码部分已经制作完毕。下面开始添加代码。


    3.打开阿里装修页面,如图:

    图片:05.jpg



    点击后进入阿里装修页面首页。




    4.添加自定义装修板块

    图片:06.jpg






    点击添加后弹出如下添加板块的窗口


    图片:07.jpg





    5.把制作好的代码复制粘贴到自定义板块中。

    图片:08.jpg





    注意:这里要特别注意,代码复制进去后千万不要切换视图模式,最好别的按钮都不要动,直接点
    击“确定”按钮。不然滚动代码会被刷掉。这里是成败的关键。



    6.效果如下:

    图片:09.jpg




    总结:阿里仅仅支持简单的HTML代码,所以这种方法没办法制作无缝轮转效果。其次是制作出来的效果不支持编辑,一旦编辑轮转代码就会被刷掉,需要重新手动加入轮转代码。(有不明白的新手朋友可以加我Q,大家共同学习。)



  • 你造福各位外贸网友啦!





  • 认认真真学习!开开心心工作!快快乐乐生活!




  • 虽然我没有权力操作主账号,但是还是很认真的看完了,为楼主的分享和技术点赞



  • cn1512170439:虽然我没有权力操作主账号,但是还是很认真的看完了,为楼主的分享和技术点赞回到原帖
    哈哈 灰常感谢哈  努力!!



  • 向程序猿致敬






  • 谢谢楼主的分享



  • 亲民高手



  • 没有权限····但是谢谢分享



  • 滚动播放做好后,播放效果不够平缓,能不能改善?还有,滚动中的图片,不能进行点击链接,只能作为展示用,能不能加上链接呢?谢谢

    我店铺的地址及做好的滚动效果:http://gzsanrong.en.alibaba.com/



  • cn1056476263:向程序猿致敬回到原帖



  • 谢谢楼主的分享精神,虽然有点不太明白,但是收藏起来以后慢慢学习!



  • 楼主 好厉害,正在学习中,可是不是主号,不能实际操作



  • 好厉害啊~谢谢楼主的分享,赞一个~



  • 谢谢分享,非常实用!



  • gzsr:滚动播放做好后,播放效果不够平缓,能不能改善?还有,滚动中的图片,不能进行点击链接,只能作为展示用,能不能加上链接呢?谢谢

    我店铺的地址及做好的滚动效果:http://gzsanrong.en.alibaba.com/
    回到原帖
    1,图片可以制作的尽量不要太大,影响加载速度。
    2,控制一下滚动速度,在开头代码中加入  scrollAmount=1 scrollDelay=1 ,值可以任意修改,数越大滚动速度越快。



  • 多谢分享。



  • 不得不说很厉害。



  • 好好学习  谢谢了


138 回复

与 外贸社区|外贸圈 的连接断开,我们正在尝试重连,请耐心等待