图片轮播：双图垂直滚动代码装修 大图触控图自动轮播代码免费生成器
时间：2018-08-16 来源：博通范文网 本文已影响 人 
在淘宝各式各样的营销方法中，视觉营销可以说是最重要的一个营销方法，因此淘宝店铺装修自然而然就成了视觉营销必备的前提条件。
平常我们看到那些装修的很高端大气上档次的店铺，他们又是如何做视觉营销、如何装修出来的呢？其实代码装修在他们装修是起到了很重要的因素，只有代码才能将店铺装修实现多样化，从而提升视觉效果。
如果我们可以利用更多的代码装修店铺，那淘宝的装修还会差吗？
如下图中，此款为双图垂直滚动模版代码，其实也就是两边共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>
推荐访问:垂直 滚动 代码 图片轮播：双图垂直滚动代码装修 dw图片滚动轮播代码 网页图片滚动轮播代码
