淘宝扶持版店铺不能在后台添加轮播模块。鱼摆摆这里为搭街坊分享一个通用的上下效果淘宝图片轮播代码。
(一)本轮播包含了演示轮播代码,大家可以在真正使用前,安装该代码查看一下轮播效果。下图是其中一个轮播代码的预览截图:
(二)本轮播代码涉及的代码下载:
/uploadfile/201208/14/1149522033.rar
正式使用时,请按下面的说明修改轮播模板代码。
(三)下面是图片轮播代码模板(未避免复制出现错误,请下载我们提供的代码后,在记事本里编辑,编辑好后再安装到淘宝) :
<div class="shop-slider">
<div class="bd">
<div class="slider-promo J_Slider J_TWidget" style="width:750px;height:400px;" align="left" data-widget-config="{'effect':'scrolly','contentCls': 'lst-main', 'navCls': 'lst-trigger', 'activeTriggerCls': 'current'}" data-widget-type="Slide">
<ul class="lst-main">
<li>
<a href="轮播链接地址1" target="_blank">
<img height="400" alt="" src="图片地址1" width="750" border="0"">
</a>
</li>
</ul>
</div>
</div>
</div>
说明1:本图片轮播代码默认宽度750像素,高度400像素。如果你的要求不同,可以修改上面紫色提示文字对应的数字。其中width指的宽度,height指高度。
说明2:本图片轮播代码默认2个图片轮播,如果你需要更多的轮播效果,只需在 </ul> 这个代码标签之前黏贴上面绿色背景的代码即可。及复制包括<li> 与</li>之间的代码。假如你有3个图片轮播,下面是修改后的代码。对比一下,你就知道该怎么添加了。考虑新手朋友,我们提供了轮播图片为2、3、4、5种效果的轮播代码,具体见下载的代码包。
<div class="shop-slider">
<div class="bd">
<div class="slider-promo J_Slider J_TWidget" style="width:750px;height:400px;" align="left" data-widget-config="{'effect':'scrolly','contentCls': 'lst-main', 'navCls': 'lst-trigger', 'activeTriggerCls': 'current'}" data-widget-type="Slide">
<ul class="lst-main">
<li>
<a href="轮播链接地址1" target="_blank">
<img height="400" alt="" src="图片地址1" width="750" border="0"">
</a>
</li>
<li>
<a href="轮播链接地址2" target="_blank">
<img height="400" alt="" src="图片地址2" width="750" border="0"">
</a>
</li>
<li>
<a href="轮播链接地址3" target="_blank">
<img height="400" alt="" src="图片地址3" width="750" border="0"">
</a>
</li>
</ul>
</div>
</div>
</div>
说明3:如果你是美工设计人员,本代码还可以适当修改后,潜入你自己设计的模板里。
说明4:使用过程中,有任何疑问,请及时与鱼摆摆联系(鱼摆摆的QQ是439749107,注明图片轮播),我们会第一时间为您答疑。鱼摆摆水平有限,本教程有不完善或者缺陷,强烈期盼您的反馈。
(四)轮播代码修改完成后的安装与图片替换、链接编辑说明.
详细教程见:http://www.yubaibai.com.cn/html/taobaozhuangxiujiaocheng/taobaozhuangxiujiaocheng_2624.html