javascript - 阿里巴巴首页轮播的实现原理是什么?轮播动的时候，没有看到样式有变化，这是为什么？

Question

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

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

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

Answer 1

overflow:hidden,可以使用scroll事件，然后通过scrollTop或者scrollLeft来实现滚动，一直以为只有overflow:scroll或者auto下可以使用scroll事件,哎，基础薄弱啊

Answer 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("<p/>");
                var g;
                for (var f = 1; f <= d; f++) {
                    g = c("<li/>").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("<p/>");
                var g;
                for (var f = 1; f <= d; f++) {
                    g = c("<li/>").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
                        }
                    }
}})

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