注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

原始点医学

http://www.ysdian.net

 
 
 

日志

 
 

基础版950通栏轮播教程代码  

2014-12-17 12:16:33|  分类: 学习类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
第一步:打开“店铺装修”
进入后台后,在导航栏下方右侧(750宽度的这边),添加一个高度为300(这个数据根据自己轮播图片的高度可自行修改)的自定义内容栏,然后在代码编辑区内输入下方代码(枚红色不要复制进出):
<p> <table border="0" cellpadding="0" cellspacing="0" class="" height="150" width="750">
<tbody>
<tr>
<td align="middle" height="300" valign="top">
</td>
</tr>
</tbody>
</table></p>
标注的红色字体300,可根据自己轮播图片的高度自行修改。代码输入后,确定就会得到一个高300宽750的空框。
 
第二步:在店铺装修的左侧(紧接导航栏下方,190这边),再插入一个自定义内容栏,
 
在代码编辑状态下,输入如下代码(枚红色不要复制进出)
<p>
 
<div class="duola">
<div class="J_TWidget scrollable" data-widget-config="{'effect': 'scrolly','easing': 'easeOutStrong', 'steps':1,'circular': true,'prevBtnCls': 'prev', 'nextBtnCls': 'next','disableBtnCls': 'disable','autoplay': true}" data-widget-type="Carousel">
<div class="slider-promo J_TWidget" data-type="fade" data-widget-config="{'effect':'fade','contentCls': 'lst-main', 'navCls': 'lst-trigger', 'activeTriggerCls': 'current'}" data-widget-type="Slide" style="width:950px;height:300px;">
<ul class="lst-main">
<li>
<a href="链接地址1" target="_blank"><img src="图片地址1" style="float:none;margin:0px;" /></a></li>
<li>
<a href="链接地址2" target="_blank"><img src="图片地址2" style="float:none;margin:0px;" /></a></li>
<li>
<a href="链接地址3" target="_blank"><img src="图片地址3" style="float:none;margin:0px;" /></a></li>
</ul>
</div>
</div>
</div>
</p>
红色代码部分,就是需要自己按要求替换。蓝色部分是重复的代码,可以继续增加第4屏第5屏,也可以减少成两屏或一屏,代码输入完毕,确定,预览即可看到轮播效果。
  评论这张
 
阅读(96)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017