newsCarousel - 滚动新闻特效

newsCarousel - 滚动新闻特效程序演示Demo

for in Intrigue

One of JavaScript’s best features is the ability to augment the built-in types. If we want to add a new method to a type, we simply assign a function to the type’s prototype.[Details]

程序简介

newsCarousel - 滚动新闻特效，我用我自己写的YaoUI代码库,模仿的YAHOO.COM新版首页的一个滚动新闻效果，新闻滚动的瞬间加载JSON数据。功能实用，调用简单，兼容性好，希望大家能喜欢。

调用方法

第一步：在页面中调用yao.js文件，例如：

第二步：编写调用代码：

(function(){
	var newsCarousel = new YAO.newsCarousel({
		carouselCnt: YAO.getEl('yt-mod'),
		carousel: YAO.getEl('yt-carousel'),
		items: 'li',
		root: YAO.getEl('y-today'),
		ajaxable: true,
		ajaxItemNum: 9
	});
	newsCarousel.init();
})();

程序代码

YAO.Carousel = function(oConfig){
	this.carouselCnt = YAO.isString(oConfig.carouselCnt) ? YAO.getEl(oConfig.carouselCnt) : (oConfig.carouselCnt || null);
	this.carousel = YAO.isString(oConfig.carousel) ? YAO.getEl(oConfig.carousel) : (oConfig.carousel || null);
	
	if(!this.carouselCnt || !this.carousel){
		return false;
	}
	
	this.items = YAO.isString(oConfig.items) ? this.carousel.getElementsByTagName(oConfig.items) : (oConfig.items || null);
	this.btnPrevious = YAO.isString(oConfig.btnPrevious) ? YAO.getEl(oConfig.btnPrevious) : (oConfig.btnPrevious || null);
	this.btnNext = YAO.isString(oConfig.btnNext) ? YAO.getEl(oConfig.btnNext) : (oConfig.btnNext || null);
	
	this.lnkBtnPrevious = this.btnPrevious ? this.btnPrevious.getElementsByTagName('a')[0] : null;
	this.lnkBtnNext = this.btnNext ? this.btnNext.getElementsByTagName('a')[0] : null;
	this.derection = oConfig.derection || 'H';
	
	if (oConfig.speed) {
		this.speed = oConfig.speed
	}
	
	this.length = this.items.length;
	this.itemWidth = this.items[0].offsetWidth;
	this.itemHeight = this.items[0].offsetHeight;
	this.width = this.itemWidth * this.length;
	this.height = this.itemHeight * this.length;
	this.stepWidth = oConfig.stepWidth || this.itemWidth;
	this.stepHeight = oConfig.stepHeight || this.itemHeight;
	this.oneScreenWidth = this.carouselCnt.offsetWidth;
	this.oneScreenHeight = this.carouselCnt.offsetHeight;
	
	if (this.derection === 'H') {
		this.onScreenItemsNum = this.oneScreenWidth / this.itemWidth;
		this.groups = Math.ceil(this.width / this.stepWidth);
		this.oneScreenGroups = this.oneScreenWidth / this.stepWidth;
		this.maxMovedGroups = this.groups - this.oneScreenGroups;
	}
	else{
		this.onScreenItemsNum = this.oneScreenHeight / this.itemHeight;
		this.groups = Math.ceil(this.height / this.stepHeight);
	    this.oneScreenGroups = this.oneScreenHeight / this.stepHeight;
		this.maxMovedGroups = this.groups - this.oneScreenGroups;
	}
};
YAO.Carousel.prototype.speed = 50;
YAO.Carousel.prototype.movedGroups = 0;
YAO.Carousel.prototype.LNK_BTNS_DISABLED_CLASS = 'dis'; 
YAO.Carousel.prototype.init = function(){
	this.initComponent();
	this.btnsEnabled();
	this.initEvents();
};
YAO.Carousel.prototype.initComponent = function(){
	if (this.derection === 'H') {
		YAO.setStyle(this.carousel, 'width', (this.width + 'px'));
	}
	else {
		YAO.setStyle(this.carousel, 'height', (this.height + 'px'));
	}
	YAO.setStyle(this.carouselCnt, 'overflow', 'hidden');
};	
YAO.Carousel.prototype.btnsEnabled = function(){
	if (this.lnkBtnNext && this.movedGroups === this.maxMovedGroups) {
		YAO.addClass(this.lnkBtnNext, this.LNK_BTNS_DISABLED_CLASS);
	}
	if (this.lnkBtnPrevious && this.movedGroups === 0) {
		YAO.addClass(this.lnkBtnPrevious, this.LNK_BTNS_DISABLED_CLASS);
	}
};
YAO.Carousel.prototype.initEvents = function(){
	YAO.on(this.btnPrevious, 'click', this.previous, this.btnPrevious, this);
	YAO.on(this.btnNext, 'click', this.next, this.btnNext, this);
};
YAO.Carousel.prototype.getItem = function(index){
	if (index < 0 || index >= this.length) {
		return null;
	}
	else {
		if (this.length > index) {
			if (!YAO.isUndefined(this.itmes[index])) {
				return this.items[index];
			}
		}
		else {
			return null;
		}
	}
};
YAO.Carousel.prototype.getItemIndexById = function(id){
	var i = 0, len = this.length;
	
	for(;i < len;++i) {
		if (!YAO.isUndefined(this.items[i])) {
			if (this.items[i].id === id) {
				return i;
			}
		}
	}
	
	return -1;
};
YAO.Carousel.prototype.getVisibleItems = function(){
	var i=this.movedGroups, len = i + this.onScreenItemsNum, items = [];
	
	for (;i < len;++i) {
		items.push(this.items[i]);
	}
	
	return items;
};
YAO.Carousel.prototype.addItem = function(item, index){
	if (index < 0 || index >= this.length) {
		return false;
	}
	else {
		this.length += 1;
		if (!index && index !== 0) {
			this.carousel.appendChild(item);
		}
		else {
			if (this.length > index) {
				if (index === 0) {
					YAO.insertBefore(item, this.items[index]);
				}
				else {
					YAO.insertAfter(item, this.items[index]);
				}
			}
		}
		if (this.derection === 'H') {
			YAO.setStyle(this.carousel, 'width', (this.width + this.itemWidth) + 'px');
		}
		else {
			YAO.setStyle(this.carousel, 'width', (this.height + this.itemHeight) + 'px');
		}
		return true;
	}
};
YAO.Carousel.prototype.removeItem = function(index){
	var item = null;
	
	if (index < 0 || index >= this.length) {
		return false;
	}
	
	item = this.items.splice(index, 1);
	if (item && item.length === 1) {
		this.length -= 1;
		
		if (item[0]) {
			if (item[0] && YAO.isAncestor(this.carousel, item[0])) {
				Event.purgeElement(item[0], true);
				this.carousel.removeChild(item[0]);
			}
			return index;
		}
		else {
			return false;
		}
	}
};
YAO.Carousel.prototype.previous = function(event){
	var evt = event || window.event;
	if (this.movedGroups > 0) {
		this.movedGroups -= 1;
		if (this.lnkBtnNext && YAO.hasClass(this.lnkBtnNext, this.LNK_BTNS_DISABLED_CLASS)) {
			YAO.removeClass(this.lnkBtnNext, this.LNK_BTNS_DISABLED_CLASS);
		}
		if (this.movedGroups <= 0) {
			this.movedGroups = 0;
			if (this.lnkBtnPrevious) {
				YAO.addClass(this.lnkBtnPrevious, this.LNK_BTNS_DISABLED_CLASS);
			}
		}
		this.scroll(this.movedGroups);
	}
	YAO.stopEvent(evt);
};
YAO.Carousel.prototype.next = function(event){
	var evt = event || window.event;
	if (this.movedGroups < this.maxMovedGroups) {
		this.movedGroups += 1;
		if (this.lnkBtnPrevious && YAO.hasClass(this.lnkBtnPrevious, this.LNK_BTNS_DISABLED_CLASS)) {
			YAO.removeClass(this.lnkBtnPrevious, this.LNK_BTNS_DISABLED_CLASS);
		}
		if (this.movedGroups >= this.maxMovedGroups) {
			this.movedGroups = this.maxMovedGroups;
			if (this.lnkBtnNext) {
				YAO.addClass(this.lnkBtnNext, this.LNK_BTNS_DISABLED_CLASS);
			}
		}
		this.scroll(this.movedGroups);
	}
	YAO.stopEvent(evt);
}; 
YAO.Carousel.prototype.scroll = function(){
	var scrollWidth = 0, scrollHeight = 0;
	if (this.derection === 'H') {
		scrollWidth = -(this.stepWidth * this.movedGroups);
	}
	else {
		scrollHeight = -(this.stepHeight * steps);
	}
	YAO.moveElement(this.carousel, scrollWidth, scrollHeight, this.speed);
};

YAO.newsCarousel = function(oConfig){
	this.root = oConfig.root;
	this.ajaxable = oConfig.ajaxable || false;
	this.ajaxItemNum = oConfig.ajaxItemNum || 0;
	// 继承时调用基类的构造函数，从而初始化设置
	YAO.newsCarousel.superclass.constructor.call(this, oConfig);
};
YAO.extend(YAO.newsCarousel, YAO.Carousel,{
	lastIndex: 0,
	toolBar: null,
	countable: true,
	curCount: null,
	talCount: null,
	ajaxable: false,
	ajaxItemNum: 0,
	speed: 10,
	initComponent: function(){
		var D = document, itemDf = D.createDocumentFragment(), ftDf = D.createDocumentFragment(), i, carouselWidth = 0, carouselHeight = 0;
		if(this.ajaxable && this.ajaxItemNum){
			for(i=0;i<this.ajaxItemNum;++i){
				// 也可以用自带的addItem方法，但是循环添加多次比起先添加到碎片中效率低
				// 使用addItem方法例子：this.addItem(YAO.Builder.Node('li'));
				itemDf.appendChild(YAO.Builder.Node('li'));
			}
			this.carousel.appendChild(itemDf);
			this.items = this.carousel.getElementsByTagName(this.items[0].tagName);
			this.length = this.items.length;
			if (this.derection === 'H') {
				carouselWidth = this.itemWidth * this.length;
				YAO.setStyle(this.carousel, 'width', carouselWidth + 'px');
			}
			else {
				carouselHeight = this.itemHeight * this.length;
				YAO.setStyle(this.carousel, 'width', carouselHeight + 'px');
			}
		}
		ftDf.appendChild(YAO.Builder.Node('div', {
			id: 'yt-ft'
		}, YAO.Builder.Node('span', {
			id: 'yt-btns'
		}, [YAO.Builder.Node('a', {
			id: 'yt-lnk-previous',
			title: '上一条',
			href: '#previous'
		}, '上一条'), YAO.Builder.Node('a', {
			id: 'yt-lnk-next',
			title: '下一条',
			href: '#next'
		})])));
		this.root.appendChild(ftDf);
		this.toolBar = YAO.getEl('yt-ft');
		this.btnPrevious = YAO.getEl('yt-lnk-previous');
		this.btnNext = YAO.getEl('yt-lnk-next');
	},
	initTools: function(){
		var D = document, oDf = D.createDocumentFragment(), oSelf = this;
		if (this.countable) {
			oDf.appendChild(YAO.Builder.Node('span', {
				id: 'yt-count'
			}, [YAO.Builder.Node('em', {
				id: 'yt-cur-count'
			}, (oSelf.lastIndex + 1) + ''), '/', YAO.Builder.Node('em', {
				id: 'yt-tal-count'
			}, oSelf.length + '')]));
			this.toolBar.appendChild(oDf);
			this.curCount = YAO.getEl('yt-cur-count');
			this.talCount = YAO.getEl('yt-tal-count');
		}
	},
	initEvents: function(){
		YAO.on(this.btnPrevious, 'click', this.previous, this.btnPrevious, this);
		YAO.on(this.btnNext, 'click', this.next, this.btnNext, this);
	},
	init: function(oConfig){
		this.initComponent(oConfig);
		this.initTools();
		this.initEvents();
	},
	previous: function(event){
		var evt = event || window.event;
		this.lastIndex -= 1;
		if (this.lastIndex < 0) {
			this.lastIndex = (this.length - 1);
			if (this.lastIndex === (this.length - 1)) {
				this.speed = this.speed / this.length;
			}
		}
		this.scroll();
		YAO.stopEvent(evt);
	},
	next: function(event){
		var evt = event || window.event;
		this.lastIndex += 1;
		if (this.lastIndex > (this.length - 1)) {
			this.lastIndex = 0;
			if (this.lastIndex === 0) {
				this.speed = this.speed / this.length;
			}
		}
		this.scroll();
		YAO.stopEvent(evt);
	},
	count: function(){
		if (this.countable) {
			this.curCount.innerHTML = (this.lastIndex + 1);
		}
	},
	scroll: function(){
		var scrollWidth = 0, scrollHeight = 0, carousel = this, elem = null;
		this.count();
		if (this.derection === 'H') {
			scrollWidth = -(this.stepWidth * this.lastIndex);
		}
		else {
			scrollHeight = -(this.stepHeight * this.lastIndex);
		}
		if (this.ajaxable) {
			elem = this.items[this.lastIndex];
			if (!YAO.trim(elem.innerHTML)) {
				YAO.addClass(elem, 'yt-loading');
				YAO.ajax({
					method: 'get',
					url: 'samples/json/' + carousel.lastIndex + '.js',
					loadFn: function(json){
						YAO.removeClass(elem, 'yt-loading');
						var data = YAO.JSON.parse(json.responseText);
						elem.innerHTML = data.html;
					},
					element: elem
				});
			}
		}
		YAO.moveElement(this.carousel, scrollWidth, scrollHeight, this.speed);
	}
});

YAOHAIXIAO.COM