javascript - 阿里巴巴首页轮播的实现原理是什么?轮播动的时候，没有看到样式有变化，这是为什么？
1688首页链接地址
先前问题写的不详细，急昏头了
当轮播发生滚动时，开发者工具中却看不到列表样式发生变化，想知道它的实现原理，我熟悉的常规方法就只有使用margin和绝对定位来实现
希望大家能帮忙整理出一些轮播实现的方法
1688首页链接地址
先前问题写的不详细，急昏头了
当轮播发生滚动时，开发者工具中却看不到列表样式发生变化，想知道它的实现原理，我熟悉的常规方法就只有使用margin和绝对定位来实现
希望大家能帮忙整理出一些轮播实现的方法
ringa_lee2017-04-10 13:11:59
overflow:hidden,可以使用scroll事件，然后通过scrollTop或者scrollLeft来实现滚动，一直以为只有overflow:scroll或者auto下可以使用scroll事件,哎，基础薄弱啊
ringa_lee2017-04-10 13:11:59
先说下原理，就是然#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
}
}
}})
剩下的代码楼主如果不是新手应该都能看懂了。