首页 > 家居生活 > 电子商务 >

淘宝店铺免费模板首页如何做图片切换效果

来源:互联网 2023-02-21 16:17:34 400

我们这些小资们在淘宝上开新铺一般应该都是使用T宝的免费模块吧?虽说收费模板也不算太贵,但对于咱小资们的新铺来说可能还在亏巨本赚信誉呢,哪还有心血去用收费模板呢?但我们这些新铺就真的是完全不能使用一些效果吗?本经验告诉你能!ZiY办公区 - 实用经验教程分享!

ZiY办公区 - 实用经验教程分享!

淘宝店铺免费模板首页如何做图片切换效果ZiY办公区 - 实用经验教程分享!

工具/原料

  • 淘宝店铺/
  • 图片/

步骤一 准备素材

  • 1

    在此步骤中,我们将为后面要做的图片切换效果先准备要做切换的图片。ZiY办公区 - 实用经验教程分享!

  • 1本页面未经授权抓取自百度经验
  • 2

    进入淘宝后,点击最顶部右边的“卖家中心”:ZiY办公区 - 实用经验教程分享!

    ZiY办公区 - 实用经验教程分享!

    淘宝店铺免费模板首页如何做图片切换效果ZiY办公区 - 实用经验教程分享!

  • 3

    进入“卖家中心”,并点击“卖家中心”左边的“图片空间”链接:ZiY办公区 - 实用经验教程分享!

    ZiY办公区 - 实用经验教程分享!

    淘宝店铺免费模板首页如何做图片切换效果ZiY办公区 - 实用经验教程分享!

  • 4

    进入“图片空间”,找到我们要的图片:ZiY办公区 - 实用经验教程分享!

    ZiY办公区 - 实用经验教程分享!

    淘宝店铺免费模板首页如何做图片切换效果ZiY办公区 - 实用经验教程分享!

  • 5

    复制图片链接及商品页链接,按顺序统一准备在EXCEL表格中,以防凌乱:ZiY办公区 - 实用经验教程分享!

    ZiY办公区 - 实用经验教程分享!

    淘宝店铺免费模板首页如何做图片切换效果ZiY办公区 - 实用经验教程分享!

  • 步骤二 做图片切换效果

  • 1

    进入“卖家中心”,并点击“卖家中心”左边的“店铺装修”链接:ZiY办公区 - 实用经验教程分享!

    淘宝店铺免费模板首页如何做图片切换效果ZiY办公区 - 实用经验教程分享!

  • 2

    进入店铺装修页面:ZiY办公区 - 实用经验教程分享!

    淘宝店铺免费模板首页如何做图片切换效果ZiY办公区 - 实用经验教程分享!

  • 3

    点击自定义模块中的中的“编辑”:ZiY办公区 - 实用经验教程分享!

    淘宝店铺免费模板首页如何做图片切换效果ZiY办公区 - 实用经验教程分享!

  • 4

    点击“编辑”后,会进入编辑页面。点击工具栏中的“编辑HTML源码”按钮:ZiY办公区 - 实用经验教程分享!

    淘宝店铺免费模板首页如何做图片切换效果ZiY办公区 - 实用经验教程分享!

  • 5

    切换到HTML源代码编辑页面:ZiY办公区 - 实用经验教程分享!

    淘宝店铺免费模板首页如何做图片切换效果ZiY办公区 - 实用经验教程分享!

  • 6

    编辑以下代码。其中href=后面的链接是商品页面链接,img中src后面的链接是滚动图片。这些信息是需要根据刚才上面EXCEL表格准备的信息来做的,一共4张图片。注意WIDTH:750px;HEIGHT:422px表示图片宽750像素、高422像素,所以你之前上传的图片一定要按这个规格来做。ZiY办公区 - 实用经验教程分享!

    DIV style="WIDTH:750px;HEIGHT:422px" class="slider-promo J_Slider J_TWidget" data-type="fade" data-widget-type="Slide" data-widget-config="{'effect':'fade','contentCls':'lst-main', 'navCls':'lst-trigger', 'activeTriggerCls':'current'}">ZiY办公区 - 实用经验教程分享!

    UL class=lst-main>ZiY办公区 - 实用经验教程分享!

    Li>!--第1张图-->ZiY办公区 - 实用经验教程分享!

    A style="WIDTH:750px;HEIGHT:422px" href="http://item.TB.com/item.htm?id=18386692184&" target=_blank>ZiY办公区 - 实用经验教程分享!

    img src="http://img04.TB.com/imgextra/i4/46583552/T27RX6Xf4cXXXXXXXX_!!46583552.jpg">/A>ZiY办公区 - 实用经验教程分享!

    /Li>ZiY办公区 - 实用经验教程分享!

    Li>!--第2张图-->ZiY办公区 - 实用经验教程分享!

    A style="WIDTH:750px;HEIGHT:422px" href="http://item.TB.com/item.htm?id=15186765481&" target=_blank>ZiY办公区 - 实用经验教程分享!

    img src="http://img02.TB.com/imgextra/i2/46583552/T2CJJWXntcXXXXXXXX_!!46583552.jpg">/A>ZiY办公区 - 实用经验教程分享!

    /Li>ZiY办公区 - 实用经验教程分享!

    Li>!--第3张图-->ZiY办公区 - 实用经验教程分享!

    A style="WIDTH:750px;HEIGHT:422px" href="http://item.TB.com/item.htm?id=16155503089&" target=_blank>ZiY办公区 - 实用经验教程分享!

    img src="http://img01.TB.com/imgextra/i1/46583552/T2UXXWXbXdXXXXXXXX_!!46583552.jpg">/A>ZiY办公区 - 实用经验教程分享!

    /Li>ZiY办公区 - 实用经验教程分享!

    Li>!--第4张图-->ZiY办公区 - 实用经验教程分享!

    A style="WIDTH:750px;HEIGHT:422px" href="http://item.TB.com/item.htm?id=18393284261&" target=_blank>ZiY办公区 - 实用经验教程分享!

    img src="http://img03.TB.com/imgextra/i3/46583552/T21SXoXhRNXXXXXXXX_!!46583552.jpg">/A>ZiY办公区 - 实用经验教程分享!

    /Li>ZiY办公区 - 实用经验教程分享!

    /UL>ZiY办公区 - 实用经验教程分享!

    /DIV〉ZiY办公区 - 实用经验教程分享!

  • 7

    编辑好后复制将粘贴到刚切换过来的HTML源代码编辑区域:ZiY办公区 - 实用经验教程分享!

    淘宝店铺免费模板首页如何做图片切换效果ZiY办公区 - 实用经验教程分享!

  • 8

    然后点击右上角的“预览”按钮或“发布”按钮即可看到效果:ZiY办公区 - 实用经验教程分享!

  • 9

    ZiY办公区 - 实用经验教程分享!

    淘宝店铺免费模板首页如何做图片切换效果ZiY办公区 - 实用经验教程分享!

  • 注意事项

    • 图片宽750像素、高422像素,所以你之前上传的图片一定要按这个规格来做。ZiY办公区 - 实用经验教程分享!

    • 本文源代码中使用的图片是链接其实是不存在的,复制时务必换成你自己淘宝空间内的图片,否则只有效果在切换,但图片无显示。因为淘宝不允许非自己淘宝空间内的图片。​ZiY办公区 - 实用经验教程分享!

    • 若发现效果有误,可到该宝首页参考效果。ZiY办公区 - 实用经验教程分享!

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!ZiY办公区 - 实用经验教程分享!


    标签: 淘宝店铺免费模板图片

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码