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
剩下的代码楼主如果不是新手应该都能看懂了。