淘宝店铺免费模板首页图片轮播切换效果代码和教程

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

淘宝店铺免费模板首页图片轮播切换效果代码和教程

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

步骤一

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

1.进入T宝后，点击最顶部右边的“卖家中心”：

2.

2.进入“卖家中心”，并点击“卖家中心”左边的“图片空间”链接：

3.

3.进入“图片空间”，找到我们要的图片：

4.

4.复制图片链接及商品页链接，按顺序统一准备在EXCEL表格中，以防凌乱：

步骤二 做图片切换效果

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

2.

2.进入店铺装修页面：

3.

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

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

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

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

<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="doc.docsou.com item.htm?id=18386692184&" target=_blank>

<img src="doc.docsou.com

/imgextra/i4/46583552/T27RX6Xf4cXXXXXXXX_!!46583552.jpg"></A>

</Li>

第1页下一页