快消品货源批发市场
快消品货源分销平台
 
 
当前位置: 货源批发网 » 网商学院 » 网店装修 » 淘宝店铺装修 » 图片轮播:双图垂直滚动代码装修

图片轮播:双图垂直滚动代码装修

放大字体  缩小字体 发布日期:2024-05-28 07:35:41  来源:电商联盟  作者:乐发网  浏览次数:31

在淘宝各式各样的营销方法中,视觉营销可以说是最重要的一个营销方法,因此淘宝店铺装修自然而然就成了视觉营销必备的前提条件。

平常我们看到那些装修的很高端大气上档次的店铺,他们又是如何做视觉营销、如何装修出来的呢?其实代码装修在他们装修是起到了很重要的因素,只有代码才能将店铺装修实现多样化,从而提升视觉效果。

如果我们可以利用更多的代码装修店铺,那淘宝的装修还会差吗?

如下图中,此款为双图垂直滚动模版代码,其实也就是两边共4张图片轮播就是了,两边不规则垂直的滚动自动播放,停留时间约3秒、滚动的时间为0.5秒。

图片轮播:双图垂直滚动代码装修

关于尺寸:宽度限制为淘宝470,天猫490。高度可以任意设置、我这里是设置了360。

装修代码:

<div style="width:950px;height:360px;position:relative;margin-top:0px;float:left;" data-title="本代码由甩手网提供">
<div class="skin-box-bd clear-fix" style="width:470px;height:360px;position:relative;float:left;">
<div class="slider-promo J_TWidget" data-widget-config="{'effect': 'scrolly','triggerType':'mouse','interval':3,'duration':0.5,'autoplay':true,'navCls': 'lst-trigger','contentCls': 'lst-main','activeTriggerCls': 'current'}" data-widget-type="Slide" style="width:950px;height:auto;position:relative;" data-title="本代码由甩手网提供">
<div class="lst-main" style="margin-left:0px;top:-360px;">
<div class="laimon_slb" style="display:block;">
<span><a title="" href="连接1" target="_blank">
<img src="图片1" style="width:470px;height:360px;"></a></span></div>
<div class="laimon_slb" style="display:block;">
<span><a title="" href="连接2" target="_blank">
<img src="图片2" style="width:470px;height:360px;"></a></span></div>
</div>
</div>
</div>

<div class="skin-box-bd clear-fix" style="width:470px;height:360px;position:relative;margin-left:10px;float:left;">
<div class="slider-promo J_TWidget" data-widget-config="{'effect': 'scrolly','triggerType':'mouse','interval':3,'duration':0.5,'autoplay':true,'navCls': 'lst-trigger','contentCls': 'lst-main1','activeTriggerCls': 'current'}" data-widget-type="Slide" style="width:950px;height:auto;position:relative;" data-title="本代码由甩手网提供">
<div class="lst-main1" style="top:-360px;">
<div class="laimon_slb" style="display:block;">
<span><a title="" href="连接3" target="_blank">
<img src="图片3" style="width:470px;height:360px;"></a></span></div>
<div class="laimon_slb" style="display:block;">
<span><a title="" href="连接4" target="_blank">
<img src="图片4" style="width:470px;height:360px;"></a></span></div>
</div>
</div>
</div>
</div>


天猫:

<div style="width:990px;height:360px;position:relative;margin-top:0px;float:left;" data-title="本代码由甩手网提供">
<div class="skin-box-bd clear-fix" style="width:490px;height:360px;position:relative;float:left;">
<div class="slider-promo J_TWidget" data-widget-config="{'effect': 'scrolly','triggerType':'mouse','interval':3,'duration':0.5,'autoplay':true,'navCls': 'lst-trigger','contentCls': 'lst-main','activeTriggerCls': 'current'}" data-widget-type="Slide" style="width:990px;height:auto;position:relative;" data-title="本代码由甩手网提供">
<div class="lst-main" style="margin-left:0px;top:-360px;">
<div class="laimon_slb" style="display:block;">
<span><a title="" href="连接1" target="_blank">
<img src="图片1" style="width:490px;height:360px;"></a></span></div>
<div class="laimon_slb" style="display:block;">
<span><a title="" href="连接2" target="_blank">
<img src="图片2" style="width:490px;height:360px;"></a></span></div>
</div>
</div>
</div>

<div class="skin-box-bd clear-fix" style="width:490px;height:360px;position:relative;margin-left:10px;float:left;">
<div class="slider-promo J_TWidget" data-widget-config="{'effect': 'scrolly','triggerType':'mouse','interval':3,'duration':0.5,'autoplay':true,'navCls': 'lst-trigger','contentCls': 'lst-main1','activeTriggerCls': 'current'}" data-widget-type="Slide" style="width:990px;height:auto;position:relative;" data-title="本代码由甩手网提供">
<div class="lst-main1" style="top:-360px;">
<div class="laimon_slb" style="display:block;">
<span><a title="" href="连接3" target="_blank">
<img src="图片3" style="width:490px;height:360px;"></a></span></div>
<div class="laimon_slb" style="display:block;">
<span><a title="" href="连接4" target="_blank">
<img src="图片4" style="width:490px;height:360px;"></a></span></div>
</div>
</div>
</div>
</div> 

乐发网超市批发网提供超市货源信息,超市采购进货渠道。超市进货网提供成都食品批发,日用百货批发信息、微信淘宝网店超市采购信息和超市加盟信息.打造国内超市采购商与批发市场供应厂商搭建网上批发市场平台,是全国批发市场行业中电子商务权威性网站。

本文内容整合网站:百度百科知乎淘宝平台规则

本文来源: 图片轮播:双图垂直滚动代码装修

分享与收藏:  网商学院搜索  告诉好友  关闭窗口  打印本文 本文关键字:
 
更多..资源下载
淘宝店铺装修图文
【官方教程】旺铺模块使用基础 淘宝神笔子账号设置方法
淘宝装修子账号设置流程 淘宝店铺装修如何实现全屏轮播
淘宝店铺装修网商学院推荐
淘宝店铺装修点击排行
 
手机版 手机扫描访问