通用的上下效果淘宝图片轮播代码及安装使用说明   公众号:鱼摆摆网   文/admin   07-02 23:38

淘宝扶持版店铺不能在后台添加轮播模块。鱼摆摆这里为搭街坊分享一个通用的上下效果淘宝图片轮播代码。

(一)本轮播包含了演示轮播代码,大家可以在真正使用前,安装该代码查看一下轮播效果。下图是其中一个轮播代码的预览截图:

(二)本轮播代码涉及的代码下载:

/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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 yubaibai360@qq.com 举报,一经查实,本站将立刻删除。

[ 标签:上下效果 淘宝图片轮播代码 ]

相关文章