84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
1688首页链接地址 先前问题写的不详细,急昏头了
当轮播发生滚动时,开发者工具中却看不到列表样式发生变化,想知道它的实现原理,我熟悉的常规方法就只有使用margin和绝对定位来实现
希望大家能帮忙整理出一些轮播实现的方法
拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...
overflow:hidden,可以使用scroll事件,然后通过scrollTop或者scrollLeft来实现滚动,一直以为只有overflow:scroll或者auto下可以使用scroll事件,哎,基础薄弱啊
先说下原理,就是然#f-slider这个列表在数值方向移动,达到让里面的N张图片上下滚动的效果。
#f-slider
然后贴代码,这个是压缩后代码的重格式化,变量都被短字符替代了
(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组件(没放上定义模块的代码)然后调用各个方法
c.use()
下面代码生成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 } } }})
剩下的代码楼主如果不是新手应该都能看懂了。
overflow:hidden,可以使用scroll事件,然后通过scrollTop或者scrollLeft来实现滚动,一直以为只有overflow:scroll或者auto下可以使用scroll事件,哎,基础薄弱啊
先说下原理,就是然
#f-slider
这个列表在数值方向移动,达到让里面的N张图片上下滚动的效果。然后贴代码,这个是压缩后代码的重格式化,变量都被短字符替代了
a.init就是入口,c是jQuery的构造器名,b时hexjs的构造器名
注重看下面, jquery和hexjs分别是著名的js类库和我不太了解的模块化库、
c.use()
引用了几个ui组件(没放上定义模块的代码)然后调用各个方法下面代码生成slider的出发控制按钮,就是那一排小圆点
下面代码注册了ui组件,包括延时,效果,方向等等的options
剩下的代码楼主如果不是新手应该都能看懂了。