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

发布时间:2015/7/22 16:03:24

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

步骤一 准备素材

  1. 1、在此步骤中,我们将为后面要做的图片切换效果先准备要做切换的图片。

  2. 2、进入淘宝后,点击最顶部右边的“卖家中心”:

  3. 3、进入“卖家中心”,并点击“卖家中心”左边的“图片空间”链接:

  4. 4、进入“图片空间”,找到我们要的图片:

  5. 5、复制图片链接及商品页链接,按顺序统一准备在EXCEL表格中,以防凌乱:

步骤二 做图片切换效果

  1. 1、进入“卖家中心”,并点击“卖家中心”左边的“店铺装修”链接:

  2. 2、进入店铺装修页面:

  3. 3、点击自定义模块中的中的“编辑”:

  4. 4、点击“编辑”后,会进入编辑页面。点击工具栏中的“编辑HTML源码”按钮:

  5. 5、切换到HTML源代码编辑页面:

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

  7. <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'}">

    <UL class=lst-main>

    <Li><!--第1张图-->

    <A style="WIDTH:750px;HEIGHT:422px" href="http://item.TB.com/item.htm?id=18386692184&" target=_blank>

    <img class='lazyload' src='/images/noimg.jpg' data-original="http://img04.TB.com/imgextra/i4/46583552/T27RX6Xf4cXXXXXXXX_!!46583552.jpg"></A>

    </Li>

    <Li><!--第2张图-->

    <A style="WIDTH:750px;HEIGHT:422px" href="http://item.TB.com/item.htm?id=15186765481&" target=_blank>

    <img class='lazyload' src='/images/noimg.jpg' data-original="http://img02.TB.com/imgextra/i2/46583552/T2CJJWXntcXXXXXXXX_!!46583552.jpg"></A>

    </Li>

    <Li><!--第3张图-->

    <A style="WIDTH:750px;HEIGHT:422px" href="http://item.TB.com/item.htm?id=16155503089&" target=_blank>

    <img class='lazyload' src='/images/noimg.jpg' data-original="http://img01.TB.com/imgextra/i1/46583552/T2UXXWXbXdXXXXXXXX_!!46583552.jpg"></A>

    </Li>

    <Li><!--第4张图-->

    <A style="WIDTH:750px;HEIGHT:422px" href="http://item.TB.com/item.htm?id=18393284261&" target=_blank>

    <img class='lazyload' src='/images/noimg.jpg' data-original="http://img03.TB.com/imgextra/i3/46583552/T21SXoXhRNXXXXXXXX_!!46583552.jpg"></A>

    </Li>

    </UL>

    </DIV〉

  8. 7、编辑好后复制将粘贴到刚切换过来的HTML源代码编辑区域:

  9. 8、然后点击右上角的“预览”按钮或“发布”按钮即可看到效果:

  10. 9、

注意事项


本文整理于互联网,如有侵权,请联系email:kf@53shop.com 进行删除处理。

上一篇:夏天卖什么最畅销?芭贝乐冰淇淋项目是你的好选择

下一篇:淘宝退款后钱退到哪里?淘宝退款的钱怎么查看?

推荐货源
选择分类:
阅读推荐
最新资讯
分类栏目
新手开店 开店经验 淘宝推广
进货技巧 淘宝故事 网店装修
图片处理 网购技巧 行业新闻
创业项目 淘宝考试 品牌排行
微信开店 品牌百科 微商货源