javascript - 阿里巴巴首页轮播的实现原理是什么?轮播动的时候,没有看到样式有变化,这是为什么?
高洛峰
高洛峰 2017-04-10 13:09:59

1688首页链接地址
先前问题写的不详细,急昏头了

当轮播发生滚动时,开发者工具中却看不到列表样式发生变化,想知道它的实现原理,我熟悉的常规方法就只有使用margin和绝对定位来实现

希望大家能帮忙整理出一些轮播实现的方法

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回覆(2)
左手右手慢动作

先说下原理,就是然#f-slider这个列表在数值方向移动,达到让里面的N张图片上下滚动的效果。

然后贴代码,这个是压缩后代码的重格式化,变量都被短字符替代了

    (function(c, b) {
    var a = {init: function() {
            var d = this;
            this._getAnscAd();
            this._createSliderTrigger();
            c.use("ui-tabs,ui-tabs-lazyload,ui-tabs-effect", function() {
                setTimeout(function() {
                    d._slider()
                }, 1000);
                d._hotMarket();
                d._hotNews1();
                d._hotNews2();
                d._hotNews3();
                d._clubStar();
                d._userIntro();
                d._category_material_slider();
                d._category_household_slider();
                d._category_clothing_slider();
                d._category_smart_slider();
                d._category_other_slider()
            })
        },_getAnscAd: function(d) {
            var g = "mm_17291662_2281434_11291123";
            var h = "tanx-a-" + g;
            if (!c("#" + h)[0]) {
                return
            }
            var e = this, f = document.createElement("script");
            f.type = "text/javascript";
            f.charset = "gbk";
            f.id = "tanx-s-" + g;
            f.async = true;
            f.src = "http://p.tanx.com/ex?i=" + g;
            tanx_h = document.getElementsByTagName("head")[0];
            if (tanx_h) {
                tanx_h.insertBefore(f, tanx_h.firstChild)
            }
        },_createSliderTrigger: function() {
            var j = c("#js-slider");
            var d = c(".f-slider li.f-tab-b", j).length;
            var h = c(".f-slider-triggers", j);
            if (h.find("li.f-tab-t").length == 0 && d > 0) {
                var e = c("

"); var g; for (var f = 1; f <= d; f++) { g = c("

  • ").addClass("f-tab-t").text(f); e.append(g); if (f == 1) { g.addClass("current") } } h.append(e.html()); e = null } },_slider: function() { var d = this; c.easing.easeOutCubic = function(g, h, f, j, i) { return j * ((h = h / i - 1) * h * h + 1) + f }; var e = c("#js-slider").tabs({timeDelay: 4,effect: "scroll",scrollType: "loop",direction: "up",speed: "slow",easing: "easeOutCubic",select: function(g, f) { if (f.index === 1 || f.index === 2) { if (!d.isLoaded) { d.isLoaded = true } } }}); c(window).bind("scroll.slider", function() { c(window).unbind("scroll.slider"); if (d.isLoaded) { return } d.isLoaded = true }) },_hotMarket: function() { c("#hot-market").tabs({isAutoPlay: false,event: "hover"}) },_hotNews1: function() { if (c("#hot-news-1").length) { FE.util.datalazyload.bind(c("#hot-news-1"), function() { c("#hot-news-1").tabs({isAutoPlay: false,event: "hover"}) }) } },_hotNews2: function() { if (c("#hot-news-2").length) { FE.util.datalazyload.bind(c("#hot-news-2"), function() { c("#hot-news-2").tabs({isAutoPlay: false,event: "hover"}) }) } },_hotNews3: function() { if (c("#hot-news-3").length) { FE.util.datalazyload.bind(c("#hot-news-3"), function() { c("#hot-news-3").tabs({isAutoPlay: false,event: "hover"}) }) } },_clubStar: function() { if (c("#club-star").length) { FE.util.datalazyload.bind(c("#club-star"), function() { c("#club-star").tabs({isAutoPlay: false,event: "hover"}) }) } },_userIntro: function() { c("#user-intro").tabs({titleSelector: ".tab-heads .tab-head",boxSelector: ".tab-contents .tab-content",isAutoPlay: false,event: "hover"}) },_category_material_slider: function() { if (c("#category-material-slider").length) { FE.util.datalazyload.bind(c("#category-material-slider"), function() { c("#category-material-slider").tabs({timeDelay: 4,effect: "scroll",scrollType: "loop",direction: "up",speed: "slow",easing: "easeOutCubic"}) }) } },_category_household_slider: function() { if (c("#category-household-slider").length) { FE.util.datalazyload.bind(c("#category-household-slider"), function() { c("#category-household-slider").tabs({timeDelay: 5,effect: "scroll",scrollType: "loop",direction: "up",speed: "slow",easing: "easeOutCubic"}) }) } },_category_clothing_slider: function() { if (c("#category-clothing-slider").length) { FE.util.datalazyload.bind(c("#category-clothing-slider"), function() { c("#category-clothing-slider").tabs({timeDelay: 4,effect: "scroll",scrollType: "loop",direction: "up",speed: "slow",easing: "easeOutCubic"}) }) } },_category_smart_slider: function() { if (c("#category-smart-slider").length) { FE.util.datalazyload.bind(c("#category-smart-slider"), function() { c("#category-smart-slider").tabs({timeDelay: 5,effect: "scroll",scrollType: "loop",direction: "up",speed: "slow",easing: "easeOutCubic"}) }) } },_category_other_slider: function() { if (c("#category-other-slider").length) { FE.util.datalazyload.bind(c("#category-other-slider"), function() { c("#category-other-slider").tabs({timeDelay: 4,effect: "scroll",scrollType: "loop",direction: "up",speed: "slow",easing: "easeOutCubic"}) }) } }}; b.define("hp-slider", a); b.register("hp-slider") })(jQuery, hexjs);
  • a.init就是入口,c是jQuery的构造器名,b时hexjs的构造器名
    注重看下面, jquery和hexjs‎分别是著名的js类库和我不太了解的模块化库、

    c.use("ui-tabs,ui-tabs-lazyload,ui-tabs-effect", function() {
         setTimeout(function() {
             d._slider()
         }, 1000);
         d._hotMarket();
         d._hotNews1();
         d._hotNews2();
        ..............
        ..............
    })
    

    c.use()引用了几个ui组件(没放上定义模块的代码)然后调用各个方法

    下面代码生成slider的出发控制按钮,就是那一排小圆点

    _createSliderTrigger: function() {
                var j = c("#js-slider");
                var d = c(".f-slider li.f-tab-b", j).length;
                var h = c(".f-slider-triggers", j);
                if (h.find("li.f-tab-t").length == 0 && d > 0) {
                    var e = c("

    "); var g; for (var f = 1; f <= d; f++) { g = c("

  • ").addClass("f-tab-t").text(f); e.append(g); if (f == 1) { g.addClass("current") } } h.append(e.html()); e = null } }
  • 下面代码注册了ui组件,包括延时,效果,方向等等的options

    c("#js-slider").tabs({timeDelay: 4,effect: "scroll",scrollType: "loop",direction: "up",speed: "slow",easing: "easeOutCubic",select: function(g, f) {
                        if (f.index === 1 || f.index === 2) {
                            if (!d.isLoaded) {
                                d.isLoaded = true
                            }
                        }
    }})
    

    剩下的代码楼主如果不是新手应该都能看懂了。

    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板
    關於我們 免責聲明 Sitemap
    PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!