淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 3264|回复: 30
收起左侧

两个方向的轮播展示

[复制链接]
  • TA的每日心情
    臭美
    2016-10-12 09:13
  • 签到天数: 11 天

    连续签到: 1 天

    [LV.3]武林新秀

    5

    主题

    62

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    12658

    发表于 2015-5-10 23:21:24 | 显示全部楼层 |阅读模式
    之前一直在找这个代码,就是和之前林氏的那种轮播差不多的,实现左右和上下双方向轮播的!研究了一下,终于实现了,共享一下给大家,草草的效果,觉得有什么不足之处大家也改正一下,第一次发贴,求顶!
    1. <div style="height:500px;">
    2.   <div class="footer-more-trigger" style="width:1920px; height:500px; border:0; padding:0; top:auto; left:50%;">
    3.     <div class="footer-more-trigger" style="width:1920px; height:500px; border:0; padding:0; top:0; left:-960px;">
    4.       <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrollx','easing':'easeBothStrong','contentCls':'content_xiaoli_bg','navCls':'nav_xiaoli','prevBtnCls':'prev_xiaoli','nextBtnCls':'next_xiaoli','autoplay':true,'interval':8,'duration':1,'pauseOnHover':false,'circular':true}">
    5.         <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrolly','easing':'easeBothStrong','contentCls':'content_xiaoli_01','navCls':'nav_xiaoli','prevBtnCls':'prev_xiaoli','nextBtnCls':'next_xiaoli','autoplay':true,'interval':8,'duration':1,'pauseOnHover':false,'circular':true}">
    6.           <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrollx','easing':'easeBothStrong','contentCls':'content_xiaoli_02','navCls':'nav_xiaoli','prevBtnCls':'prev_xiaoli','nextBtnCls':'next_xiaoli','autoplay':true,'interval':8,'duration':1.5,'pauseOnHover':false,'circular':true}">
    7.             <div style="width:1920px; height:500px; overflow:hidden;">
    8.               <ul class="content_xiaoli_bg">
    9.                 <li style="width:1920px; height:500px; background:url(\"\") no-repeat;"></li>
    10.                 <li style="width:1920px; height:500px; background:url(\"\") no-repeat;;"></li>
    11.                 <li style="width:1920px; height:500px;background:url(\"\") no-repeat;;"></li>
    12.               </ul>
    13.             </div>
    14.             <div class="footer-more-trigger" style="width:1920px; height:500px; overflow:hidden; border:0; padding:0; top:0; left:0;">
    15.               <div style="width:1920px; height:500px;">
    16.                 <ul class="content_xiaoli_01">
    17.                   <li style="width:1920px; height:500px;"> <a href="#" style="width:1920px; height:500px; display:block;"><img src="http://img03.taobaocdn.com/imgextra/i3/74947587/TB24LjRcFXXXXa8XXXXXXXXXXXX_!!74947587.png" /></a> </li>
    18.                   <li style="width:1920px; height:500px;"> <a href="#" style="width:1920px; height:500px; display:block;"><img src="http://img04.taobaocdn.com/imgextra/i4/74947587/TB2oK2McFXXXXbNXXXXXXXXXXXX_!!74947587.png" /></a> </li>
    19.                   <li style="width:1920px; height:500px;"> <a href="#" style="width:1920px; height:500px; display:block;"><img src="http://img03.taobaocdn.com/imgextra/i3/74947587/TB24LjRcFXXXXa8XXXXXXXXXXXX_!!74947587.png" /></a> </li>
    20.                 </ul>
    21.               </div>
    22.             </div>
    23.             <div class="footer-more-trigger" style="width:1920px; height:500px; overflow:hidden; border:0; padding:0; top:0; left:0;">
    24.               <div style="width:1920px; height:500px;">
    25.                 <ul class="content_xiaoli_02">
    26.                   <li style="width:1920px; height:500px;"> <a href="#" style="width:1920px; height:500px; display:block;"><img src="http://img04.taobaocdn.com/imgextra/i4/74947587/TB2oK2McFXXXXbNXXXXXXXXXXXX_!!74947587.png" /></a> </li>
    27.                   <li style="width:1920px; height:500px;"> <a href="#" style="width:1920px; height:500px; display:block;"><img src="http://img03.taobaocdn.com/imgextra/i3/74947587/TB24LjRcFXXXXa8XXXXXXXXXXXX_!!74947587.png" /></a> </li>
    28.                   <li style="width:1920px; height:500px;"> <a href="#" style="width:1920px; height:500px; display:block;"><img src="http://img04.taobaocdn.com/imgextra/i4/74947587/TB2oK2McFXXXXbNXXXXXXXXXXXX_!!74947587.png" /></a> </li>
    29.                 </ul>
    30.               </div>
    31.             </div>
    32.             <div class="nav_xiaoli" style="display:none;">
    33.               <div>1</div>
    34.               <div>2</div>
    35.               <div>2</div>
    36.             </div>
    37.             <div  class="prev_xiaoli footer-more-trigger" style="width:50px; height:50px; background:url(\"\") 0 0; border:0; padding:0; top:257px; left:400px;"></div>
    38.             <div  class="next_xiaoli footer-more-trigger" style="width:50px; height:50px; background:url(\"\") 0 0; border:0; padding:0; top:257px; left:auto; right:400px;"></div>
    39.           </div>
    40.         </div>
    41.       </div>
    42.     </div>
    43.   </div>
    44. </div>

    这里有实现效果后的淘宝店铺页面http://anyasi.taobao.com,欢迎来踩,我会多发代码贴的,大家一起学习研究!

    评分

    参与人数 3美工币 +140 收起 理由
    Rain + 100 感谢分享!
    123bobodec + 20 很帅气
    熙XI熙 + 20 原创!

    查看全部评分

  • TA的每日心情

    2015-9-29 17:06
  • 签到天数: 87 天

    连续签到: 1 天

    [LV.6]渐入佳境

    26

    主题

    339

    帖子

    5万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    52932

    最佳新人热心会员天猫美工

    发表于 2015-5-10 23:30:25 | 显示全部楼层
    原创支持一下
  • TA的每日心情
    求抱抱
    2016-7-10 18:26
  • 签到天数: 66 天

    连续签到: 1 天

    [LV.6]渐入佳境

    2

    主题

    301

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    10026

    最佳新人热心会员

    QQ
    发表于 2015-5-11 08:17:18 | 显示全部楼层
    待会去试试咯
    来自安卓客户端来自安卓客户端
    开始成为大神了!!!
  • TA的每日心情
    思考
    昨天 07:16
  • 签到天数: 954 天

    连续签到: 14 天

    [LV.10]功行圆满

    6

    主题

    226

    帖子

    21万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    214729

    最佳新人热心会员天猫美工宣传达人优秀版主活跃会员

    发表于 2015-5-11 09:04:49 | 显示全部楼层
    不错啊,顶!

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    臭美
    2015-9-30 09:04
  • 签到天数: 224 天

    连续签到: 3 天

    [LV.7]炉火纯青

    5

    主题

    495

    帖子

    7万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    76999

    天猫美工最佳新人热心会员

    发表于 2015-5-11 09:13:55 | 显示全部楼层
    支持下!!!不错,等去试试看

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

    该用户从未签到

    0

    主题

    4

    帖子

    3134

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    3134

    发表于 2015-5-11 09:17:15 | 显示全部楼层
    先顶了 在看

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情

    2016-4-16 13:38
  • 签到天数: 9 天

    连续签到: 1 天

    [LV.3]武林新秀

    6

    主题

    24

    帖子

    4262

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    4262

    发表于 2015-5-11 11:52:13 | 显示全部楼层
    先顶了 在看

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    求抱抱
    2016-7-10 18:26
  • 签到天数: 66 天

    连续签到: 1 天

    [LV.6]渐入佳境

    2

    主题

    301

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    10026

    最佳新人热心会员

    QQ
    发表于 2015-5-11 16:40:54 | 显示全部楼层
    代码有错哦
    开始成为大神了!!!
  • TA的每日心情
    臭美
    2016-10-12 09:13
  • 签到天数: 11 天

    连续签到: 1 天

    [LV.3]武林新秀

    5

    主题

    62

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    12658

     楼主| 发表于 2015-5-11 17:45:53 | 显示全部楼层

    什么错呢???我页面测试是没问题的,不过这个是用在淘宝专业版的,天猫的要改一下代码 的,改样式 就行了

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    小黑屋|Archiver|手机版|粤公网安备44060502000322号|淘宝美工论坛 ( 桂ICP备12007265号-8 )  

    GMT+8, 2016-12-9 04:10 , Processed in 0.129833 second(s), 38 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表