淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 712|回复: 2
收起左侧

[美工相关] 自己写的轮播代码,轮播箭头做成弹出层代码该往哪加

[复制链接]
  • TA的每日心情
    抱抱
    2015-6-25 09:56
  • 签到天数: 3 天

    连续签到: 1 天

    [LV.2]登堂入室

    8

    主题

    51

    帖子

    2801

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    2801

    发表于 2015-6-13 20:34:36 | 显示全部楼层 |阅读模式
    我对照着淘宝开放平台的widget做了好久,箭头弹出层的效果还是做不出来,一张图片的会做,轮播的就不会了,求指点啊





    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head>

    <body>
    <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrollx','easing':'easeOutStrong','navCls':'xuan_nav','contentCls':'xuan_content','interval':3,'autoplay':true,'prevBtnCls':'xuan_prev','nextBtnCls':'xuan_next'}" style=" margin-left:100px; width:520px; height:275px;">



    /* 轮播箭头开始*/<div class="xuan_prev footer-more-trigger" style="width:50px;height:50px;padding:0px;top:125px;border:none;left:110px; float:left; z-index:3; cursor:pointer;"> <img src="http://img01.taobaocdn.com/imgextra/i1/330550602/TB26rjddXXXXXcGXXXXXXXXXXXX_!!330550602.png">
    </div>
    <div class="xuan_next footer-more-trigger" style="width:50px;height:50px;padding:0px;top:125px;border:none;left:560px; float:left; z-index:3; cursor:pointer;"> <img src="http://img01.taobaocdn.com/imgextra/i1/330550602/TB2E9y2dXXXXXaNXpXXXXXXXXXX_!!330550602.png">
    </div>
    /*轮播箭头结束*/




    /*content开始*/
    <div style=" width:520px; height:275px; overflow:hidden;" >

      <div class="xuan_content">
    <div style="width:520px; height:275px"> <a href="#"> <img src="http://img01.taobaocdn.com/imgextra/i1/330550602/TB21O1ZdXXXXXXAXXXXXXXXXXXX_!!330550602.png" /> </a></div>

        <div style="width:520px; height:275px"> <a href="#"><img src="http://img02.taobaocdn.com/imgextra/i2/330550602/TB2kreIdXXXXXbnXpXXXXXXXXXX_!!330550602.png"  /> </a></div>
      </div>
      </div>
      /*content结束*/





            <div class="xuan_nav footer-more-trigger" style="width:86px;height:21px;padding:0px;top:250px;border:none;left:317px;">
                    <div style="width:40px; height:21px; float:left; cursor:pointer">
                            <img src="http://img01.taobaocdn.com/imgextra/i1/330550602/TB21O1ZdXXXXXXAXXXXXXXXXXXX_!!330550602.png_40x40.jpg" />
                    </div>
                    <div style="width:40px; height:21px; float:left; margin-left:6px; cursor:pointer">
                            <img src="http://img02.taobaocdn.com/imgextra/i2/330550602/TB2kreIdXXXXXbnXpXXXXXXXXXX_!!330550602.png_40x40.jpg" />
                    </div>

    </div>

      </div>

    </body>
    </html>



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


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

  • TA的每日心情
    抱抱
    2015-6-25 09:56
  • 签到天数: 3 天

    连续签到: 1 天

    [LV.2]登堂入室

    8

    主题

    51

    帖子

    2801

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    2801

     楼主| 发表于 2015-6-14 10:18:46 | 显示全部楼层
    等了一天了 谁知道  麻烦说下啊 该怎么加。。。

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


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

  • TA的每日心情
    大哭
    2016-10-27 11:20
  • 签到天数: 210 天

    连续签到: 1 天

    [LV.7]炉火纯青

    7

    主题

    418

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    41948

    最佳新人热心会员

    发表于 2015-6-14 11:08:34 | 显示全部楼层
    本帖最后由 久灵 于 2015-6-14 12:32 编辑

    箭头弹出么????
    我理解是是要这个功能???? 如果不是 就当我没回复! 效果正常! jdfw1.gif

    1. <div style="margin-left:100px; width:520px; height:275px;">
    2.         <div class="footer-more-trigger tan_chudian" style=" width:520px; height:275px; border:0; padding:0; top:auto; left:auto;">

    3.                 <!-- 轮播 -->
    4.                 <div class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'effect':'scrollx','easing':'easeOutStrong','navCls':'xuan_nav','contentCls':'xuan_content','interval':3,'autoplay':true,'prevBtnCls':'xuan_prev','nextBtnCls':'xuan_next'}">       
    5.                        
    6.                         <!--content-->
    7.                         <div style=" width:520px; height:275px; overflow:hidden;">
    8.                                 <ul class="xuan_content">
    9.                                         <li style="width:520px; height:275px">
    10.                                                 <a href="#"> <img data-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/330550602/TB21O1ZdXXXXXXAXXXXXXXXXXXX_!!330550602.png" /> </a>
    11.                                         </li>
    12.                                         <li style="width:520px; height:275px">
    13.                                                 <a href="#"> <img data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/330550602/TB2kreIdXXXXXbnXpXXXXXXXXXX_!!330550602.png" /> </a>
    14.                                         </li>
    15.                                 </ul>
    16.                         </div>       
    17.                         <!--content end-->
    18.                        
    19.                         <!--prev next-->       
    20.                         <div class="J_TWidget xuan_prev" data-widget-type="Popup" data-widget-config="{'trigger':'.tan_chudian','align':{'node':'.tan_chudian','points':['cc','cc'],'offset':[-210,0]}}">
    21.                                 <div class="xuan_prev" style=" cursor:pointer; width:50px; height:50px;">
    22.                                         <img data-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/330550602/TB26rjddXXXXXcGXXXXXXXXXXXX_!!330550602.png">
    23.                                 </div>
    24.                         </div>
    25.                        
    26.                         <div class="J_TWidget xuan_next" data-widget-type="Popup" data-widget-config="{'trigger':'.tan_chudian','align':{'node':'.tan_chudian','points':['cc','cc'],'offset':[210,0]}}">
    27.                                 <div class="xuan_next" style=" cursor:pointer; width:50px; height:50px;">
    28.                                         <img data-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/330550602/TB2E9y2dXXXXXaNXpXXXXXXXXXX_!!330550602.png" />
    29.                                 </div>
    30.                         </div>
    31.                         <!--prev next end-->
    32.                        
    33.                          <!--nav-->
    34.                         <div class="xuan_nav footer-more-trigger" style="width:86px; height:21px; padding:0px; top:auto; bottom:15px; border:none; left:317px;">
    35.                                 <div style="width:40px; height:21px; float:left; cursor:pointer">
    36.                                         <img data-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/330550602/TB21O1ZdXXXXXXAXXXXXXXXXXXX_!!330550602.png_40x40.jpg" />
    37.                                 </div>
    38.                                 <div style="width:40px; height:21px; float:left; margin-left:6px; cursor:pointer">
    39.                                         <img data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/330550602/TB2kreIdXXXXXbnXpXXXXXXXXXX_!!330550602.png_40x40.jpg" />
    40.                                 </div>
    41.                         </div>
    42.                         <!--nav end-->
    43.                        
    44.                        
    45.                        
    46.                 </div>       
    47.                 <!--轮播 end-->

    48.         </div>       
    49. </div>






    如果他有自卑感,即使你故意掩饰自己的优秀,也无法提升他的自尊!
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

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

    GMT+8, 2016-12-3 12:38 , Processed in 0.114700 second(s), 16 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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