Ext.define('Ext.ux.InfiniteCarousel', {
extend: 'Ext.Carousel',
xtype: 'infinitecarousel',
config: {
indicator: false
},
initConfig: function(){
var me = this;
me.callParent(arguments);
me.delay = me.config.delay;
delete me.config;
},
initialize: function(){
var me = this;
me.callParent();
var isEven = function(nb){
return (nb%2 == 0) ? true : false;
};
me.nbItems = me.getItems().length;
me.interval = (isEven(me.nbItems) ? me.nbItems/2 : (me.nbItems-1)/2);
me.setActiveItem(me.interval);
me.on('activeitemchange', me.onActiveItemChange, me);
if(me.delay > 0)
me.timeout = Ext.defer(me.rotate, me.delay, me);
},
onActiveItemChange: function(c,v,ov){
var me = this;
if (me.timeout){
clearTimeout(me.timeout);
me.timeout = Ext.defer(me.rotate, me.delay, me);
}
var active = c.getActiveIndex(),
direction = (c.getItems().indexOf(v) > c.getItems().indexOf(ov)) ? 'forward' : 'backward',
container = (direction=='forward') ? c.getAt(active-me.interval-1) : c.getAt(active+me.interval+1);
c.remove(container, false);
(direction=='forward') ? c.add(container) : c.insert(0,container);
},
rotate: function(){
this.next();
}
});
分享到:
相关推荐
另一方面,InfiniteCarousel 从有关轮播元素的元数据开始,从头开始构建它们。 这是一种直接的编程方法,它为您提供了很大的灵活性。 InfiniteCarousel 也沉着应对响应。 因为它生成并控制轮播的元素(而不是试图将...
let infiniteCarousel = RollingView(images: imageArray) { (index) in // 这个闭包会在每次轮播时被调用,更新UIPageControl或其他界面元素 self.pageControl.currentPage = index } view.addSubview...
$('.carousel').infiniteCarousel({ speed: 500, // 动画速度 interval: 3000, // 自动切换间隔 visibleItems: 3, // 每页显示图片数量 arrows: true // 是否显示箭头控制 }); }); ``` ### 3. 高级定制 除了...
import InfiniteCarousel from 'react-leaf-carousel' ; ReactDOM . render ( < InfiniteCarousel breakpoints = { [ { breakpoint : 500 , settings : { slidesToShow : 2 , slidesToScroll : 2 , } , ...