淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 23807|回复: 166
收起左侧

【小包子】发一个简单高大上的轮播特效代码给大家无需CSS

  [复制链接]
  • TA的每日心情
    大哭
    2015-11-15 15:32
  • 签到天数: 194 天

    连续签到: 1 天

    [LV.7]炉火纯青

    43

    主题

    710

    帖子

    6万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    61128

    热心会员最佳新人活跃会员

    QQ
    发表于 2015-6-18 10:33:10 | 显示全部楼层 |阅读模式
    本帖最后由 晕菜小包子 于 2015-6-18 10:46 编辑
    如题,了解我的人都知道我不喜欢废话,这个其实很久前就弄出来了,今天发表一下,冒个泡。


    效果图:

    abcd.gif

    源码在此【内附主要思路代码和注解】:

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

    4. <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-->
    5.   <div style="height:604px;width:100%;overflow:hidden;z-index:1;"><!--轮播的参数可以自己随意调整哦,更多惊喜等你去发现,熟悉Carousel调用的请随意挖掘,你们是城里人这个怎么玩不用我教吧!-->
    6.     <div class="ks-switchable-content"><!--这里我就不命名轮播内容层的类名了直接使用系统的,轮播框架内使用margin按照上右下左的顺时针顺序进行重新在一个大框架内布局轮播小图-->
    7.       <p style="height: 604px; width: 1099px;"><img data-ks-lazyload="http://img04.taobaocdn.com/imgextra/i4/641468270/TB20i69bVXXXXXiXXXXXXXXXXXX_!!641468270.jpg" style="margin:1px 0px 0px 1px;"/></p>
    8.       <p style="height: 604px; width: 1099px;"><img data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/641468270/TB2iqDEbVXXXXXtXpXXXXXXXXXX_!!641468270.jpg" style="margin:1px 0px 0px 549px;"/></p>
    9.       <p style="height: 604px; width: 1099px;"><img data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/641468270/TB227Y5bVXXXXa3XXXXXXXXXXXX_!!641468270.jpg" style="margin:1px 0px 0px 825px;"/></p>
    10.       <p style="height: 604px; width: 1099px;"><img data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/641468270/TB2umTPbVXXXXbeXXXXXXXXXXXX_!!641468270.jpg" style="margin:287px 0px 0px 825px;"/></p>
    11.       <p style="height: 604px; width: 1099px;"><img data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/641468270/TB2mt6ObVXXXXbTXXXXXXXXXXXX_!!641468270.jpg" style="margin:393px 0px 0px 825px;"/></p>
    12.       <p style="height: 604px; width: 1099px;"><img data-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/641468270/TB2gq2UbVXXXXXiXXXXXXXXXXXX_!!641468270.jpg" style="margin:499px 0px 0px 825px;"/></p>
    13.       <p style="height: 604px; width: 1099px;"><img data-ks-lazyload="http://img04.taobaocdn.com/imgextra/i4/641468270/TB2WIYSbVXXXXX.XXXXXXXXXXXX_!!641468270.jpg" style="margin:499px 0px 0px 550px;"/></p>
    14.       <p style="height: 604px; width: 1099px;"><img data-ks-lazyload="http://img04.taobaocdn.com/imgextra/i4/641468270/TB2v0rFbVXXXXcGXXXXXXXXXXXX_!!641468270.jpg" style="margin:499px 0px 0px 275px;"/></p>
    15.       <p style="height: 604px; width: 1099px;"><img data-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/641468270/TB2XXbzbVXXXXaKXpXXXXXXXXXX_!!641468270.jpg" style="margin:499px 0px 0px 0px;"/></p>
    16.       <p style="height: 604px; width: 1099px;"><img data-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/641468270/TB2gjPLbVXXXXXtXXXXXXXXXXXX_!!641468270.jpg" style="margin:287px 0px 0px 0px;"/></p>
    17.       <p style="height: 604px; width: 1099px;"><img data-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/641468270/TB2m.vObVXXXXbVXXXXXXXXXXXX_!!641468270.jpg" style="margin:287px 0px 0px 275px;"/></p>
    18.       <p style="height: 604px; width: 1099px;"><img data-ks-lazyload="http://img01.taobaocdn.com/imgextra/i1/641468270/TB2CU2xbVXXXXb_XpXXXXXXXXXX_!!641468270.jpg" style="margin:287px 0px 0px 550px;"/></p>
    19.       <p style="height: 604px; width: 1099px;"><img data-ks-lazyload="http://img02.taobaocdn.com/imgextra/i2/641468270/TB23lLDbVXXXXXzXpXXXXXXXXXX_!!641468270.jpg" style="margin:394px 0px 0px 550px;"/></p>
    20.     </div>
    21.   </div>
    22.   <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;"><!--这里对应上面轮播内容的小轮播图片的链接,改对应的"#"这里就使用系统类实现的定位-->
    23.    <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">
    24.    <img data-ks-lazyload="http://img.taobao.com/L1/142/411681371/assets/images/click.gif" style="width:100%;height:100%;"></a>
    25.    <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">
    26.    <img data-ks-lazyload="http://img.taobao.com/L1/142/411681371/assets/images/click.gif" style="width:100%;height:100%;"></a>
    27.    <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">
    28.    <img data-ks-lazyload="http://img.taobao.com/L1/142/411681371/assets/images/click.gif" style="width:100%;height:100%;"></a>
    29.    <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">
    30.    <img data-ks-lazyload="http://img.taobao.com/L1/142/411681371/assets/images/click.gif" style="width:100%;height:100%;"></a>
    31.    <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">
    32.    <img data-ks-lazyload="http://img.taobao.com/L1/142/411681371/assets/images/click.gif" style="width:100%;height:100%;"></a>
    33.    <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">
    34.    <img data-ks-lazyload="http://img.taobao.com/L1/142/411681371/assets/images/click.gif" style="width:100%;height:100%;"></a>
    35.    <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">
    36.    <img data-ks-lazyload="http://img.taobao.com/L1/142/411681371/assets/images/click.gif" style="width:100%;height:100%;"></a>
    37.    <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">
    38.    <img data-ks-lazyload="http://img.taobao.com/L1/142/411681371/assets/images/click.gif" style="width:100%;height:100%;"></a>
    39.    <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">
    40.    <img data-ks-lazyload="http://img.taobao.com/L1/142/411681371/assets/images/click.gif" style="width:100%;height:100%;"></a>
    41.    <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="http://img.taobao.com/L1/142/411681371/assets/images/click.gif" style="width:100%;height:100%;"></a>
    42.    <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="http://img.taobao.com/L1/142/411681371/assets/images/click.gif" style="width:100%;height:100%;"></a>
    43.    <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="http://img.taobao.com/L1/142/411681371/assets/images/click.gif" style="width:100%;height:100%;"></a>
    44.    <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="http://img.taobao.com/L1/142/411681371/assets/images/click.gif" style="width:100%;height:100%;"></a>
    45.    </div>
    46. </div>

    47. </div>
    48. </div>

    49. <!--怎么样结构清晰吧,可以直接自己调整代码的定位后放到自定义区域发布欣赏,觉得还可以的话给个赞吧!原理很简单,定位,轮播,思路才是最重要的。知道原理的自己去弄另外一个不是很简单么!城里人,我知道你们会玩!好了我是小包子下次见。-->
    复制代码


    我希望你们不要当神兽党,因为这样很打击别人发帖的动力!  预览地址请点击我的签名!源码请下载附件,貌似以源码发布图片地址被转换了!







    高大上轮播.zip

    1.8 KB, 下载次数: 611, 下载积分: 美工币 -2

    这里是源码

    评分

    参与人数 39美工币 +774 收起 理由
    闹太套 + 20 感谢分享!
    乐想 + 20
    洋气小香风 + 8 原创!
    东AND妹 + 10 赞一个!
    小宇 + 1 赞一个!
    西吉雨馨 + 10 很给力!
    星河小未来 + 10 赞一个!
    请叫我金豆 + 1 很给力!
    魑魅魍魉 + 20 很给力!
    进击的兵长 + 20 哇塞 这个轮播一直想要 谢谢小包子.
    什么鬼 + 20 很给力!
    董翠 + 2 很给力!
    轻辞浅雨 + 8 乐于助人!
    漠然 + 20 赞一个!
    tutu + 20 很给力!
    shuxing + 8 乐于助人!
    Eminem + 20 很给力!
    大土豆 + 10 很给力!
    ahu + 8 !!
    凶猛熊猫 + 8 很给力!

    查看全部评分

    本帖被以下淘专辑推荐:

  • TA的每日心情
    委屈
    3 天前
  • 签到天数: 290 天

    连续签到: 1 天

    [LV.8]自成一派

    53

    主题

    2469

    帖子

    8万

    积分

    超级版主

    阅读权限: 150

    超级大菜鸟

    Rank: 18Rank: 18Rank: 18Rank: 18Rank: 18

    积分
    88986

    最佳新人热心会员宣传达人推广达人活跃会员优秀版主

    发表于 2015-6-18 10:42:18 | 显示全部楼层
    你们城里人真会玩

    评分

    参与人数 1美工币 +8 收起 理由
    你就是自由 + 8 哟哟好久不见 ~

    查看全部评分

    回复 支持 1 反对 0

    使用道具 举报

  • TA的每日心情
    委屈
    2016-1-2 15:21
  • 签到天数: 222 天

    连续签到: 1 天

    [LV.7]炉火纯青

    41

    主题

    1121

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    41680

    天猫美工淘宝皇冠店美工最佳新人热心会员活跃会员优秀版主

    QQ
    发表于 2015-6-18 10:35:00 | 显示全部楼层
    沙发沙发沙发沙发沙发

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


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

  • TA的每日心情

    2015-9-9 09:40
  • 签到天数: 57 天

    连续签到: 1 天

    [LV.5]略有小成

    2

    主题

    85

    帖子

    7073

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    7073

    最佳新人

    发表于 2015-6-18 10:39:47 | 显示全部楼层
    为什么打不开

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


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

  • TA的每日心情
    抱抱
    2015-8-28 09:03
  • 签到天数: 75 天

    连续签到: 2 天

    [LV.6]渐入佳境

    4

    主题

    236

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    16452

    发表于 2015-6-18 10:41:23 | 显示全部楼层
    小包子,好久不见你了哦
    哈哈哈哈哈
  • TA的每日心情
    大哭
    2015-11-15 15:32
  • 签到天数: 194 天

    连续签到: 1 天

    [LV.7]炉火纯青

    43

    主题

    710

    帖子

    6万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    61128

    热心会员最佳新人活跃会员

    QQ
     楼主| 发表于 2015-6-18 10:42:11 | 显示全部楼层

    请下载源码,根据注释安装代码,小白我原谅你的无知

  • TA的每日心情
    吐舌头
    2016-11-15 10:44
  • 签到天数: 44 天

    连续签到: 1 天

    [LV.5]略有小成

    2

    主题

    407

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    16669

    发表于 2015-6-18 10:42:48 | 显示全部楼层
    好   我喜欢

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


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

  • TA的每日心情
    大哭
    2015-11-15 15:32
  • 签到天数: 194 天

    连续签到: 1 天

    [LV.7]炉火纯青

    43

    主题

    710

    帖子

    6万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    61128

    热心会员最佳新人活跃会员

    QQ
     楼主| 发表于 2015-6-18 10:43:04 | 显示全部楼层
    本帖最后由 晕菜小包子 于 2015-6-18 10:59 编辑
    Rain 发表于 2015-6-18 10:42
    你们城里人真会玩

    我从乡下来的,都被你们这群人带坏了


    点评

    我山上来的,都被你们这群乡下来的带坏了  发表于 2015-6-18 11:12
  • TA的每日心情
    大哭
    2015-12-23 16:11
  • 签到天数: 74 天

    连续签到: 1 天

    [LV.6]渐入佳境

    4

    主题

    102

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    16126

    发表于 2015-6-18 10:45:39 | 显示全部楼层
    楼主无私

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


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

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

    本版积分规则

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

    GMT+8, 2016-12-11 04:33 , Processed in 0.148177 second(s), 47 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

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