淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1666|回复: 8
收起左侧

旋转轮播代码展示

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

    连续签到: 1 天

    [LV.3]武林新秀

    5

    主题

    62

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    12658

    发表于 2015-6-22 14:13:56 | 显示全部楼层 |阅读模式
    一段时间没见,最近没怎么玩了!前几天弄一段旋转轮播代码,放上来共同研究一下,是C店专业版的!有小BUG
    问题就是:点击后的播放时不是直接滚过去,而是直接消失上一张,推过来,这个研究了好久没有搞定 ,其它测试是没有问题的!
    代码其实不难,是轮播代码调一下就行了,有代码基础的可以慢慢研究,大神勿喷哟!
    不说了,丢代码:

    1. <div style="height:233px;">
    2.   <div class="footer-more-trigger" style="left:50%;top:-20px;border:none;padding:0;">
    3.     <div class="footer-more-trigger" style="left:-960px;top:auto;border:none;padding:0;">
    4.         <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'nextBtnCls':'sx_right_carousel','activeTriggerCls':'hidden','easing':'none','interval':'5','effect':'scrollx','navCls':'nav_lsm_shiyan','prevBtnCls':'sx_left_carousel','circular':true,'viewSize':[220],'contentCls':'content_lsm_shiyan','autoplay':true}" style="height:233px; width:1920px; overflow: hidden; position: relative;" data-widget-init="1">

    5. <table width="1920" height="233" border="0" cellpadding="0" cellspacing="0">
    6. <tr bgcolor="#1d1d1d"><td width="410">
    7. <span class="sx_left_carousel sn-simple-logo footer-more-trigger" style="height:auto;width:auto; float:left; margin-left:370px;z-index:90;top:100px;cursor:pointer;border:none;"><img src="http://img02.taobaocdn.com/imgextra/i2/74947587/TB2ruXwdpXXXXcBXpXXXXXXXXXX_!!74947587.png" class="img-ks-lazyload"></span>
    8. </td><td width="1100">
    9. <div style="height:233px;">
    10. <div class="sn-simple-logo footer-more-trigger" style="width:1100px;height:233px;border:0;padding:0;right:auto;z-index:1;top:auto;left:410px;">
    11. <div class="sn-simple-logo footer-more-trigger" style="width:1100px;height:233px;border:0;padding:0;right:auto;z-index:1;top:auto;left:0px; background:#1d1d1d;">
    12. <ul class="content_lsm_shiyan" style="position: absolute; width: 999999px; left:0px;">
    13. <li style="width: 220px; height: 233px; display: block;" class="ks-switchable-panel-internal599"> <a  target="_blank" style="width:220px;height:233px;display:block;background-image:url(http://img01.taobaocdn.com/imgextra/i1/74947587/TB2AoxIdpXXXXXIXpXXXXXXXXXX_!!74947587.jpg);"> </a> </li>
    14. <li style="width: 220px; height: 233px; display: block;" class="ks-switchable-panel-internal599"> <a  target="_blank" style="width:220px;height:233px;display:block;background-image:url(http://img03.taobaocdn.com/imgextra/i3/74947587/TB28b4ydpXXXXccXpXXXXXXXXXX_!!74947587.jpg);"> </a> </li>
    15. <li style="width: 220px; height: 233px; display: block;" class="ks-switchable-panel-internal599"> <a  target="_blank" style="width:220px;height:233px;display:block;background-image:url(http://img03.taobaocdn.com/imgextra/i3/74947587/TB2FsNNdpXXXXcIXXXXXXXXXXXX_!!74947587.jpg);"> </a> </li>
    16. <li style="width: 220px; height: 233px; display: block;" class="ks-switchable-panel-internal599"> <a  target="_blank" style="width:220px;height:233px;display:block;background-image:url(http://img02.taobaocdn.com/imgextra/i2/74947587/TB24987dpXXXXcuXXXXXXXXXXXX_!!74947587.jpg);"> </a> </li>
    17. <li style="width: 220px; height: 233px; display: block;" class="ks-switchable-panel-internal599"> <a  target="_blank" style="width:220px;height:233px;display:block;background-image:url(http://img02.taobaocdn.com/imgextra/i2/74947587/TB2ZDhVdpXXXXbmXpXXXXXXXXXX_!!74947587.jpg);"> </a> </li>
    18. </ul>

    19. <ul class="nav_lsm_shiyan" style="display:none;"><li class="ks-switchable-trigger-internal329">1</li><li class="ks-switchable-trigger-internal329">2</li><li class="ks-switchable-trigger-internal329">3</li><li class="ks-switchable-trigger-internal329">4</li><li class="ks-switchable-trigger-internal329 hidden">5</li></ul>
    20. </div> </div> </div></td>
    21. <td width="410">
    22. <span class="sx_right_carousel sn-simple-logo footer-more-trigger" style="height:auto;width:auto;float:left; margin-left:1530px;z-index:90;top:100px;cursor:pointer;border:none;"><img src="http://img04.taobaocdn.com/imgextra/i4/74947587/TB2oFVPdpXXXXcxXXXXXXXXXXXX_!!74947587.png" class="img-ks-lazyload"></span></td></tr></table>
    23. </div></div></div></div>
    复制代码
    案例展示的效果:http://anyasi.taobao.com代码其实不难,是轮播代码调一下就行了,有代码基础的可以慢慢研究,大神勿喷哟!

  • TA的每日心情
    加油
    2016-2-19 10:16
  • 签到天数: 112 天

    连续签到: 1 天

    [LV.6]渐入佳境

    3

    主题

    410

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    23943

    最佳新人热心会员

    QQ
    发表于 2015-6-22 14:43:21 | 显示全部楼层
    没基础,我就看看不说话
    我就看看不说话
  • TA的每日心情

    2016-6-11 16:25
  • 签到天数: 192 天

    连续签到: 1 天

    [LV.7]炉火纯青

    23

    主题

    553

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    27818

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

    QQ
    发表于 2015-6-22 15:19:11 | 显示全部楼层
    就看看,我是认识26个字母,可惜组合到一起就不认识了
  • TA的每日心情
    抱抱
    2015-9-8 16:21
  • 签到天数: 1 天

    连续签到: 1 天

    [LV.1]初学乍练

    0

    主题

    6

    帖子

    1116

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    1116

    发表于 2015-6-22 17:20:12 | 显示全部楼层
    我弄起来怎么不动呢

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


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

  • TA的每日心情
    抱抱
    5 小时前
  • 签到天数: 679 天

    连续签到: 6 天

    [LV.9]已臻大成

    26

    主题

    2631

    帖子

    18万

    积分

    高级会员

    阅读权限: 50

    Rank: 8Rank: 8

    积分
    185843

    最佳新人热心会员活跃会员灌水之王

    QQ
    发表于 2015-6-22 17:22:13 | 显示全部楼层
    我就看看不说话
    QQ交流群  107102001
  • TA的每日心情
    臭美
    2016-10-12 09:13
  • 签到天数: 11 天

    连续签到: 1 天

    [LV.3]武林新秀

    5

    主题

    62

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    12658

     楼主| 发表于 2015-6-24 21:02:35 来自手机 | 显示全部楼层
    bianjianqin 发表于 2015-6-22 17:20
    我弄起来怎么不动呢

    这个是淘宝的,在我页面里有展示效果,做出来是要那样的!

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


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

  • TA的每日心情
    加油
    2016-6-13 13:27
  • 签到天数: 21 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    0

    主题

    20

    帖子

    3070

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    3070

    QQ
    发表于 2015-8-4 13:41:45 | 显示全部楼层
    没基础,所以整不明白,我就看看!

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


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

  • TA的每日心情
    不爽
    2015-6-22 11:24
  • 签到天数: 20 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    16

    主题

    61

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    31196

    发表于 2015-8-11 01:42:50 | 显示全部楼层
    进去瞅瞅

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


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

  • TA的每日心情
    不爽
    2015-6-22 11:24
  • 签到天数: 20 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    16

    主题

    61

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    31196

    发表于 2015-8-11 01:45:44 | 显示全部楼层
    进去瞅瞅

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


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

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

    本版积分规则

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

    GMT+8, 2016-12-9 13:43 , Processed in 0.126406 second(s), 21 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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