当前位置:首页 ? 淘宝装修教程 ? 正文

香港乖乖六合图库:淘宝店铺图片轮播模板时尚简约高大上的特效代码模板

3420 人参与  2015年08月07日 08:59  分类 : 淘宝装修教程  评论

曾道人六合图库 www.6kc9y.cn 代码说明:简约又显得那么高大上的淘宝图片轮播代码,无需css特效也很炫酷。飞蚂蚁推荐的淘宝店铺装修代码,代码里面带有原作者的注释,方便大家修改??梢灾苯幼约旱髡氲亩ㄎ缓蠓诺阶远ㄒ迩蚍⒉夹郎?,觉得还可以的话给个赞吧!原理很简单,定位,轮播,思路才是最重要的。知道原理的自己去弄另外一个不是很简单么!效果图如下:

1-150P21612550-L.jpg

<div style="height:604px;">
<div style="height:627px;width:1920px;left:-685px;padding:0;margin:0;border:0;" class="footer-more-trigger"><img data-ks-lazyload="//img04.taobaocdn.com/imgextra/i4/641468270/TB2g_n2bVXXXXXfXpXXXXXXXXXX_!!641468270.jpg"/></div><!--这里的data-ks-lazyload是以前的使用延迟加载技术使用别人图片空间的图片,貌似现在淘宝服务器自己转了不用这个可以直接用src属性,图址是1920的大背景层,基于基础版偏移left-685专业版-485-->
<div style="height:auto; width:1099px; left:-274.5px; padding:0; margin:0; border:0;" class="footer-more-trigger"><!--基础版偏移left-274.5专业版-74.5偏移自己调整,这里是轮播框架的开始-->

<div class="J_TWidget" data-widget-config="{'effect':'scrolly','easing': 'elasticBoth','duration':0.5,'activeTriggerCls':'pagination','interval':1,'prevBtnCls': 'prev','nextBtnCls': 'next','autoplay':true,'navCls':'navs','triggerType':'mouse'}" data-widget-type="Carousel" style="position:relative;overflow:hidden;height:auto;"><!--none easeNone 0.5 0.8-->
  <div style="height:604px;width:100%;overflow:hidden;z-index:1;"><!--轮播的参数可以自己随意调整哦,更多惊喜等你去发现,熟悉Carousel调用的请随意挖掘,你们是城里人这个怎么玩不用我教吧!-->
    <div class="ks-switchable-content"><!--这里我就不命名轮播内容层的类名了直接使用系统的,轮播框架内使用margin按照上右下左的顺时针顺序进行重新在一个大框架内布局轮播小图-->
      <p style="height: 604px; width: 1099px;"><img data-ks-lazyload="//img04.taobaocdn.com/imgextra/i4/641468270/TB20i69bVXXXXXiXXXXXXXXXXXX_!!641468270.jpg" style="margin:1px 0px 0px 1px;"/></p>
      <p style="height: 604px; width: 1099px;"><img data-ks-lazyload="//img02.taobaocdn.com/imgextra/i2/641468270/TB2iqDEbVXXXXXtXpXXXXXXXXXX_!!641468270.jpg" style="margin:1px 0px 0px 549px;"/></p>
      <p style="height: 604px; width: 1099px;"><img data-ks-lazyload="//img02.taobaocdn.com/imgextra/i2/641468270/TB227Y5bVXXXXa3XXXXXXXXXXXX_!!641468270.jpg" style="margin:1px 0px 0px 825px;"/></p>
      <p style="height: 604px; width: 1099px;"><img data-ks-lazyload="//img02.taobaocdn.com/imgextra/i2/641468270/TB2umTPbVXXXXbeXXXXXXXXXXXX_!!641468270.jpg" style="margin:287px 0px 0px 825px;"/></p>
      <p style="height: 604px; width: 1099px;"><img data-ks-lazyload="//img02.taobaocdn.com/imgextra/i2/641468270/TB2mt6ObVXXXXbTXXXXXXXXXXXX_!!641468270.jpg" style="margin:393px 0px 0px 825px;"/></p>
      <p style="height: 604px; width: 1099px;"><img data-ks-lazyload="//img01.taobaocdn.com/imgextra/i1/641468270/TB2gq2UbVXXXXXiXXXXXXXXXXXX_!!641468270.jpg" style="margin:499px 0px 0px 825px;"/></p>
      <p style="height: 604px; width: 1099px;"><img data-ks-lazyload="//img04.taobaocdn.com/imgextra/i4/641468270/TB2WIYSbVXXXXX.XXXXXXXXXXXX_!!641468270.jpg" style="margin:499px 0px 0px 550px;"/></p>
      <p style="height: 604px; width: 1099px;"><img data-ks-lazyload="//img04.taobaocdn.com/imgextra/i4/641468270/TB2v0rFbVXXXXcGXXXXXXXXXXXX_!!641468270.jpg" style="margin:499px 0px 0px 275px;"/></p>
      <p style="height: 604px; width: 1099px;"><img data-ks-lazyload="//img01.taobaocdn.com/imgextra/i1/641468270/TB2XXbzbVXXXXaKXpXXXXXXXXXX_!!641468270.jpg" style="margin:499px 0px 0px 0px;"/></p>
      <p style="height: 604px; width: 1099px;"><img data-ks-lazyload="//img01.taobaocdn.com/imgextra/i1/641468270/TB2gjPLbVXXXXXtXXXXXXXXXXXX_!!641468270.jpg" style="margin:287px 0px 0px 0px;"/></p>
      <p style="height: 604px; width: 1099px;"><img data-ks-lazyload="//img01.taobaocdn.com/imgextra/i1/641468270/TB2m.vObVXXXXbVXXXXXXXXXXXX_!!641468270.jpg" style="margin:287px 0px 0px 275px;"/></p>
      <p style="height: 604px; width: 1099px;"><img data-ks-lazyload="//img01.taobaocdn.com/imgextra/i1/641468270/TB2CU2xbVXXXXb_XpXXXXXXXXXX_!!641468270.jpg" style="margin:287px 0px 0px 550px;"/></p>
      <p style="height: 604px; width: 1099px;"><img data-ks-lazyload="//img02.taobaocdn.com/imgextra/i2/641468270/TB23lLDbVXXXXXzXpXXXXXXXXXX_!!641468270.jpg" style="margin:394px 0px 0px 550px;"/></p>
    </div>
  </div>
  <div class="navs footer-more-trigger" style="width:100%;height:100%;margin:0 auto;padding;0;border:0;left:0px;top:0px;z-index:1;"><!--这里对应上面轮播内容的小轮播图片的链接,改对应的"#"这里就使用系统类实现的定位-->
   <a style="width:550px;height:286px;top:0;left:0;display:block;margin:0;padding:0px;border:0;" target="_blank" href="#" class="footer-more-trigger">
   <img data-ks-lazyload="//img.taobao.com/L1/142/411681371/assets/images/click.gif" style="width:100%;height:100%;"></a> 
   <a style="width:275px;height:286px;top:0;left:549px;display:block;margin:0;padding:0px;border:0;" target="_blank" href="#" class="footer-more-trigger">
   <img data-ks-lazyload="//img.taobao.com/L1/142/411681371/assets/images/click.gif" style="width:100%;height:100%;"></a>
   <a style="width:274px;height:286px;top:0px;left:827px;display:block;margin:0;padding:0px;border:0;" target="_blank" href="#" class="footer-more-trigger">
   <img data-ks-lazyload="//img.taobao.com/L1/142/411681371/assets/images/click.gif" style="width:100%;height:100%;"></a>
   <a style="width:274px;height:106px;top:287px;left:827px;display:block;margin:0;padding:0px;border:0;" target="_blank" href="#" class="footer-more-trigger">
   <img data-ks-lazyload="//img.taobao.com/L1/142/411681371/assets/images/click.gif" style="width:100%;height:100%;"></a>
   <a style="width:274px;height:106px;top:393px;left:827px;display:block;margin:0;padding:0px;border:0;" target="_blank" href="#" class="footer-more-trigger">
   <img data-ks-lazyload="//img.taobao.com/L1/142/411681371/assets/images/click.gif" style="width:100%;height:100%;"></a> 
   <a style="width:274px;height:106px;top:499px;left:827px;display:block;margin:0;padding:0px;border:0;" target="_blank" href="#" class="footer-more-trigger">
   <img data-ks-lazyload="//img.taobao.com/L1/142/411681371/assets/images/click.gif" style="width:100%;height:100%;"></a> 
   <a style="width:274px;height:106px;top:499px;left:549px;display:block;margin:0;padding:0px;border:0;" target="_blank" href="#" class="footer-more-trigger">
   <img data-ks-lazyload="//img.taobao.com/L1/142/411681371/assets/images/click.gif" style="width:100%;height:100%;"></a> 
   <a style="width:274px;height:106px;top:499px;left:276px;display:block;margin:0;padding:0px;border:0;" target="_blank" href="#" class="footer-more-trigger">
   <img data-ks-lazyload="//img.taobao.com/L1/142/411681371/assets/images/click.gif" style="width:100%;height:100%;"></a> 
   <a style="width:274px;height:106px;top:499px;left:0px;display:block;margin:0;padding:0px;border:0;" target="_blank" href="#" class="footer-more-trigger">
   <img data-ks-lazyload="//img.taobao.com/L1/142/411681371/assets/images/click.gif" style="width:100%;height:100%;"></a> 
   <a style="width:274px;height:213px;top:287px;left:0px;display:block;margin:0;padding:0px;border:0;" target="_blank" href="#" class="footer-more-trigger"><img data-ks-lazyload="//img.taobao.com/L1/142/411681371/assets/images/click.gif" style="width:100%;height:100%;"></a> 
   <a style="width:275px;height:213px;top:287px;left:276px;display:block;margin:0;padding:0px;border:0;" target="_blank" href="#" class="footer-more-trigger"><img data-ks-lazyload="//img.taobao.com/L1/142/411681371/assets/images/click.gif" style="width:100%;height:100%;"></a> 
   <a style="width:275px;height:106px;top:287px;left:549px;display:block;margin:0;padding:0px;border:0;" target="_blank" href="#" class="footer-more-trigger"><img data-ks-lazyload="//img.taobao.com/L1/142/411681371/assets/images/click.gif" style="width:100%;height:100%;"></a> 
   <a style="width:275px;height:106px;top:396px;left:549px;display:block;margin:0;padding:0px;border:0;" target="_blank" href="#" class="footer-more-trigger"><img data-ks-lazyload="//img.taobao.com/L1/142/411681371/assets/images/click.gif" style="width:100%;height:100%;"></a> 
   </div>
</div>

</div>
</div>

【温馨提示:代码可编辑后再运行;部分代码需在淘宝装修店铺的自定义??槟谟τ貌畔允菊?,本站无法正常显示】


来源:曾道人六合图库(QQ号:254206549),转载请保留出处和链接!

本文链接://www.6kc9y.cn/zxjc/755.html

淘宝装修教程  淘宝装修代码  淘宝轮播代码  

加入【淘宝店铺装修】QQ群:474687967(加群验证:飞蚂蚁模板网)

淘宝天猫内部优惠券九元九特卖网一般人,我不告诉他喔!

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

控制面板

您好,欢迎到访网站!
  [查看权限]
350装修模板
淘宝快递单号
连衣裙

飞蚂蚁影院

曾道人六合图库 | 曾道人六合图库 | 曾道人六合图库 | 曾道人六合图库 | 曾道人六合图库 | 网站地图 | 留言板 | 广告合作 | 飞蚂蚁影院

Copyright(c)2013-2016曾道人六合图库 All Rights Reserved. 粤ICP备14055454号
淘宝店铺装修交流群群号:474687967

曾道人六合图库
曾道人六合图库
  • 人民日报评论员:在党的引领下汇聚圆梦力量 2019-06-17
  • 打破孤立预言!世界杯开启俄罗斯荣耀时刻,普京献词“地球盛会” 2019-06-17
  • 北京市将迎两位新区长 三人拟任区委副书记 2019-06-10
  • 端午假期结束 中国接待国内游客8910万人次 2019-06-03
  • 让“毒跑道”绝迹 内蒙古各方联手共同监管校园跑道 2019-06-02
  • 中国反击美国相关新闻 2019-06-02
  • 佛山成功孵化高校科技成果项目 2019-05-31
  • 市场能调节供需平衡吗? 2019-05-31
  • 关于国务院二招十分成功的旧改工程案例向 各省市推广解决民生住房困难的创新科技 2019-05-28
  • 新华社2017年度新闻记者证核验通过人员名单公示 2019-05-28
  • 21CN.COM 增值电信业务经营许可证 2019-05-19
  • 精兵劲旅·血脉赓续:第79集团军——忠诚有魂  转型重塑开新局 2019-05-15
  • 遭遇隐形歧视 就业权益谁来维护 2019-05-15
  • 房产证办十年 如此懒政岂能容忍 2019-05-14
  • 清热-热门标签-华商生活 2019-05-10
  • 彩票江苏快3开奖号码 福彩3d最近十期开机号列表 宁夏11选5走势图出号 大乐透后区选号范围 永辉线上娱乐 pc蛋蛋答题 福彩双色球走势图2 河北快3豹子遗漏数据 黑龙江十一选五我买大小嘛 2019新版跑狗图官网 上海基诺彩票天多少期 辽宁快乐12开奖查询 天际彩民心水论坛 老11选5和新11选5 球探足球指数网