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

 | 
只看楼主


  • 0 楼#

    深圳他拍档网络服务有限公司

    • 粉丝
      712
    • 人气
      4085
    • 积分
      1720
    • 铜币
      3592

    图片:1.webp.jpg



    很多朋友在平时的交流时候都有问到,阿里首页上图片都是静态的,怎么可以做到滚动的效果呢?今天给大家介绍如何用代码实现首页图片滚动展示的效果。


    首先给大家看下滚播的效果:(点击文章底部"阅读原文")http://www.xjwkj.en.alibaba.com


    怎么做呢?事不宜迟,马上进入正题:


    1.滚动代码


    以下是展示网页的代码:


    图片:2.webp.jpg

    (红框内为图片链接,表示图片。)

    2.插入代码的步骤


    (1)在首页建立一个单独的板块,上传需要滚动的图片。
    注:图片大小一致,宽度可以被990px整除。


    (2)找到需要插入代码的位置和需要滚播的图片,在HTML界面将图片排列好。


    (3)用需要滚播的图片代替代码中的图片,更改图片总宽度和图片高度。


    图片:3.webp.jpg



    图片替换分三个部分:


    第一部分:


    图片:4.webp.jpg



    这段代码需要总宽度是990px数量的图片(一张图片宽度是330px,就用三张图,一张图片的宽度是165,就用6张图)。


    第二部分:


    图片:5.webp.jpg




    用剩余的图片替换第二段代码。


    第三部分:


    图片:6.webp.jpg



    将第一段代码再最后重复一遍。
    (将代码重复一遍的原因:轮播的过程当中会出现错位或图片对不齐的问题,将该段代码重复写一次可以解决该问题。)


    (4)将更改好的代码复制粘贴到自定义板块中就可以了。


    3.注意事项


    (1)图片大小一致,宽度可以被990px整除。
    (2)滚播一定要新建一个单独的自定义板块。
    (3)为了防止代码变动造成滚播失败,代码替换结束之后,直接在HTML界面点击保存,不要切换到图片界面点击保存。


    以上就是店铺首页图片滚动效果设置的过程,马上去试试吧!另外,需要以上图片中代码原文的朋友,可以在后台留下您的邮箱号码,我们会将代码原文发至到您的邮箱中哦~


    注│他拍档电商一直非常尊重劳动者的成果和重视引用外部内容时的版权问题,除未特别说明外,本微信平台所发布的文章均属于他拍档电商原创。如我方转载时会标注作者及其出处,若侵权还请及时告知小编,我们立删,并表示歉意!今日文章为他拍档原创。

  • 封禁
    1 楼#

    kf or tea

    • 粉丝
      113
    • 人气
      1893
    • 积分
      0
    • 铜币
      1038

    用户被禁言,该主题自动屏蔽!

  • 2 楼#

    陈小妮

    • 粉丝
      381
    • 人气
      1510
    • 积分
      123
    • 铜币
      535

    不错,谢谢楼主啦

  • 3 楼#

    名人堂de小二

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

    我要代表圈妹奖励你么么哒一个!

  • 4 楼#

    cn1511654439

    • 粉丝
      9
    • 人气
      188
    • 积分
      0
    • 铜币
      55

    我咋没看到图片动 啊 还是支持你

  • 5 楼#

    cn1511654439

    • 粉丝
      9
    • 人气
      188
    • 积分
      0
    • 铜币
      55

    cn1511654439:我咋没看到图片动 啊 还是支持你回到原帖
    在下看到了  牛逼

  • 6 楼#

    yjjusta

    • 粉丝
      15
    • 人气
      98
    • 积分
      390
    • 铜币
      24

    地球已经无法阻止你的脚步了!

  • 7 楼#

    灰太狼王

    • 粉丝
      32
    • 人气
      444
    • 积分
      55
    • 铜币
      30

    我盯着屏幕看了两三分钟,图片居然不滚动,尴尬...以为是浏览器的问题,换了三个,还是不滚动,太尴尬了。
    正在放弃之际,往下翻,发现他们业务挺漂亮的,然后,图片居然滚动了。好神奇的说咩!
    对,滚动的是 Our Exhibition 那部分。
    不用太感谢我,我能做的,还有很多!

  • 8 楼#

    bwklemandou

    • 粉丝
      3
    • 人气
      67
    • 积分
      170
    • 铜币
      37

    谢谢分享 麻烦把代码发我邮箱一下 marketing@lemandou.com  不胜感激!

  • 9 楼#

    点石成金-邱雪妮

    • 粉丝
      18
    • 人气
      408
    • 积分
      0
    • 铜币
      110


    我要代表圈妹奖励你么么哒一个!

  • 10 楼#

    cn1517733382wefn

    • 粉丝
      0
    • 人气
      59
    • 积分
      0
    • 铜币
      11

    谢谢分享 麻烦把代码发我邮箱一下 sales06@chinarhycom.com  不胜感激!

  • 11 楼#

    cn1518063449lefg

    • 粉丝
      0
    • 人气
      46
    • 积分
      40
    • 铜币
      0

    谢谢分享

  • 12 楼#

    dgjingyi

    • 粉丝
      1
    • 人气
      169
    • 积分
      270
    • 铜币
      13

    谢谢分享 麻烦把代码发我邮箱一下 kevin@dg-jingyi.com

  • 13 楼#

    cnrealfine

    • 粉丝
      3
    • 人气
      88
    • 积分
      320
    • 铜币
      63

    麻烦把代码发送到group02@chinarealfine.com,谢谢

  • 14 楼#

    ahlongda

    • 粉丝
      23
    • 人气
      340
    • 积分
      35
    • 铜币
      3441

    楼主造福地球了, 邮箱: stevenversus@vip.qq.com

  • 15 楼#

    zzbiye8

    • 粉丝
      1
    • 人气
      200
    • 积分
      583
    • 铜币
      38

    谢谢分享 麻烦楼主把代码发我邮箱一下 nancy@zzbiye.com

  • 16 楼#

    cn1515809942zidx

    • 粉丝
      0
    • 人气
      95
    • 积分
      0
    • 铜币
      5

    谢谢分享 麻烦楼主把代码发我邮箱一下 1324232934@qq.com

  • 17 楼#

    cn220004543

    • 粉丝
      20
    • 人气
      363
    • 积分
      0
    • 铜币
      493

    谢谢分享 麻烦楼主把代码发我邮箱一下 sherlyxie@kaiyunfa.com.cn

  • 18 楼#

    静香

    • 粉丝
      60
    • 人气
      374
    • 积分
      381
    • 铜币
      562

    我也非常喜欢,发我邮箱一下吧。谢谢!
    luisa.jing@yt-jinxiang.com

  • 19 楼#

    hengcchina

    • 粉丝
      8
    • 人气
      246
    • 积分
      130
    • 铜币
      71

    不错,谢谢楼主啦



  • 图片:1.webp.jpg



    很多朋友在平时的交流时候都有问到,阿里首页上图片都是静态的,怎么可以做到滚动的效果呢?今天给大家介绍如何用代码实现首页图片滚动展示的效果。


    首先给大家看下滚播的效果:(点击文章底部"阅读原文")http://www.xjwkj.en.alibaba.com


    怎么做呢?事不宜迟,马上进入正题:


    1.滚动代码


    以下是展示网页的代码:


    图片:2.webp.jpg

    (红框内为图片链接,表示图片。)

    2.插入代码的步骤


    (1)在首页建立一个单独的板块,上传需要滚动的图片。
    注:图片大小一致,宽度可以被990px整除。


    (2)找到需要插入代码的位置和需要滚播的图片,在HTML界面将图片排列好。


    (3)用需要滚播的图片代替代码中的图片,更改图片总宽度和图片高度。


    图片:3.webp.jpg



    图片替换分三个部分:


    第一部分:


    图片:4.webp.jpg



    这段代码需要总宽度是990px数量的图片(一张图片宽度是330px,就用三张图,一张图片的宽度是165,就用6张图)。


    第二部分:


    图片:5.webp.jpg




    用剩余的图片替换第二段代码。


    第三部分:


    图片:6.webp.jpg



    将第一段代码再最后重复一遍。
    (将代码重复一遍的原因:轮播的过程当中会出现错位或图片对不齐的问题,将该段代码重复写一次可以解决该问题。)


    (4)将更改好的代码复制粘贴到自定义板块中就可以了。


    3.注意事项


    (1)图片大小一致,宽度可以被990px整除。
    (2)滚播一定要新建一个单独的自定义板块。
    (3)为了防止代码变动造成滚播失败,代码替换结束之后,直接在HTML界面点击保存,不要切换到图片界面点击保存。


    以上就是店铺首页图片滚动效果设置的过程,马上去试试吧!另外,需要以上图片中代码原文的朋友,可以在后台留下您的邮箱号码,我们会将代码原文发至到您的邮箱中哦~


    注│他拍档电商一直非常尊重劳动者的成果和重视引用外部内容时的版权问题,除未特别说明外,本微信平台所发布的文章均属于他拍档电商原创。如我方转载时会标注作者及其出处,若侵权还请及时告知小编,我们立删,并表示歉意!今日文章为他拍档原创。


  • 封禁

    用户被禁言,该主题自动屏蔽!



  • 不错,谢谢楼主啦



  • 我要代表圈妹奖励你么么哒一个!



  • 我咋没看到图片动 啊 还是支持你



  • cn1511654439:我咋没看到图片动 啊 还是支持你回到原帖
    在下看到了  牛逼



  • 地球已经无法阻止你的脚步了!



  • 我盯着屏幕看了两三分钟,图片居然不滚动,尴尬...以为是浏览器的问题,换了三个,还是不滚动,太尴尬了。
    正在放弃之际,往下翻,发现他们业务挺漂亮的,然后,图片居然滚动了。好神奇的说咩!
    对,滚动的是 Our Exhibition 那部分。
    不用太感谢我,我能做的,还有很多!



  • 谢谢分享 麻烦把代码发我邮箱一下 marketing@lemandou.com  不胜感激!




  • 我要代表圈妹奖励你么么哒一个!



  • 谢谢分享 麻烦把代码发我邮箱一下 sales06@chinarhycom.com  不胜感激!



  • 谢谢分享



  • 谢谢分享 麻烦把代码发我邮箱一下 kevin@dg-jingyi.com



  • 麻烦把代码发送到group02@chinarealfine.com,谢谢



  • 楼主造福地球了, 邮箱: stevenversus@vip.qq.com



  • 谢谢分享 麻烦楼主把代码发我邮箱一下 nancy@zzbiye.com



  • 谢谢分享 麻烦楼主把代码发我邮箱一下 1324232934@qq.com



  • 谢谢分享 麻烦楼主把代码发我邮箱一下 sherlyxie@kaiyunfa.com.cn



  • 我也非常喜欢,发我邮箱一下吧。谢谢!
    luisa.jing@yt-jinxiang.com



  • 不错,谢谢楼主啦


32 回复

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