今天给大家设计了一款淘宝店铺促销区使用的四图轮播卡盘效果模板代码,尺寸为:750*400像素!先看看效果图
[MustVIP][/MustVIP]
<div class="slider-promo J_Slider J_TWidget" data-widget-config="{'effect': 'fade','triggerType':'mouse','duration': 0.5,'autoplay':true,'navCls': 'lst-trigger','contentCls': 'lst-main','activeTriggerCls': 'current'}" data-widget-type="Slide" style="width: 750px; height: 441px"> <div style="height: 400px; overflow: hidden"> <div class="lst-main"> <div> <a href="http://www.taobao.com" style="width: 750px; height: 400px" target="_blank"><img height="400" src="http://img04.taobaocdn.com/imgextra/i4/30446694/T2jNd_XYJXXXXXXXXX-30446694.jpg" width="750" /></a></div> <div> <a href="http://www.taobao.com" style="width: 750px; height: 400px" target="_blank"><img height="400" src="http://img04.taobaocdn.com/imgextra/i4/30446694/T2jNd_XYJXXXXXXXXX-30446694.jpg" width="750" /></a></div> <div> <a href="http://www.taobao.com" style="width: 750px; height: 400px" target="_blank"><img height="400" src="http://img04.taobaocdn.com/imgextra/i4/30446694/T2jNd_XYJXXXXXXXXX-30446694.jpg" width="750" /></a></div> <div> <a href="http://www.taobao.com" style="width: 750px; height: 400px" target="_blank"><img height="400" src="http://img04.taobaocdn.com/imgextra/i4/30446694/T2jNd_XYJXXXXXXXXX-30446694.jpg" width="750" /></a></div> </div> </div> <div class="lst-trigger" style="border-bottom: #0c0 1px solid; text-align: center; border-left: #0c0 1px solid; line-height: 30px; width: 748px; margin-bottom: 0px; background: #0c0; height: 30px; border-top: #0c0 1px solid; cursor: pointer; border-right: #0c0 1px solid; left: 0px"> <div class="current" style="width: 25%; float: left; height: 30px"> 第一张图片的标题/限15个字</div> <div style="width: 25%; float: left; height: 30px"> 第二张图片的标题/限15个字</div> <div style="width: 25%; float: left; height: 30px"> 第三张图片的标题/限15个字</div> <div style="width: 25%; float: left; height: 30px"> 第四张图片的标题/限15个字</div> </div> </div>
[/MustVIP]
使用说明:模板代码复制后,请先保存到你电脑中的系统记事本里!保存后,请直接在模板代码中修改相关参数,模板代码中凡是有中文的地方就是需要修改成你自己的商品图片和超链接的地方!模板代码中也有提示,请务必认真填写,千万不要删除模版中文字2边的引号哟!注意:图片的尺寸必须为750*400像素!
不懂的,可以给站长留言,对了,模板代码安装后,必须要发布后,才能看到轮播的效果!