YTabs！图片头条新闻集锦

程序开发：YAOHAIXIAO.COM发表时间：2010 - 01 - 23

: 混血美女莉亚迪桑
HTTP压缩是在Web服务器和浏览器间传输压缩 [详细]

: 听歌的美女
HTTP压缩是在Web服务器和浏览器间传输压缩 [详细]

: 名模写真
HTTP压缩是在Web服务器和浏览器间传输压缩 [详细]

: 极品红色法拉利跑车
HTTP压缩是在Web服务器和浏览器间传输压缩 [详细]

: 空中特技表演
HTTP压缩是在Web服务器和浏览器间传输压缩 [详细]

1 2 3 4 5

数字索引带标题和简介的效果

听歌的美女
名模写真
超级红色法拉利
美女利亚迪桑

自动横向透明过度切换的效果

听歌的美女

名模写真

混血美女莉亚迪桑

超飙的红色法拉利跑车

空中特技表演

1 2 3 4 5

数字索引透明过度切换的效果

读专题

更多>

: 入夏尝三鲜

文章说明文章说明文章说明
: 就是不去新天地

文章说明文章说明文章说明
: 打败猪流感

文章说明文章说明文章说明
: 最佳环境餐厅推荐

文章说明文章说明文章说明

订餐小秘书图片自动切换标题新闻效果

自动纵向滚动切换效果

程序简介

YTabs！图片头条新闻集锦，我整理的一组很经典的图片头条新闻效果。图片过度时，可以选择滚动切换，也可以选择透明的渐显过度。这一组效果都很实用，兼容性好，调用超方便。

调用方法

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

第二步：编写调用代码：

(function(){
	YAO.YTabs({
		tabs: YAO.getEl('YNIndex').getElementsByTagName('a'),
		contents: YAO.getEl('YNews').getElementsByTagName('dl'),
		auto: true,
		fadeUp: true
	}, {
		tabs: YAO.getEl('hs-bd').getElementsByTagName('dt'),
		contents: YAO.getEl('hs-bd').getElementsByTagName('dd'),
		evt: 'click',
		auto: true,
		fadeUp: true
	}, {
		tabs: YAO.getEl('jSIndex').getElementsByTagName('a'),
		contents: YAO.getElByClassName('YSample', 'p', 'YSlide'),
		defaultIndex: 1,
		auto: true,
		fadeUp: true
	},{
		tabRoot: 'YTabs',
		tabs: 'dd',
		contents: 'dt',
		auto: true,
		fadeUp: true
	},{
		tabs: YAO.getEl('YSamples').getElementsByTagName('img'),
		contents: YAO.getEl('YPhotos').getElementsByTagName('img'),
		auto: true,
		scroll: true,
		scrollId: 'YPhotos'
	});
})();

程序代码

var tabView = function(oConfigs){
	this.tabRoot = YAO.isString(oConfigs.tabRoot) ? YAO.getEl(oConfigs.tabRoot) : (oConfigs.tabRoot || null);
	this.tabs = YAO.isString(oConfigs.tabs) ? this.tabRoot.getElementsByTagName(oConfigs.tabs) : (oConfigs.tabs || null);
	this.contents = YAO.isString(oConfigs.contents) ? this.tabRoot.getElementsByTagName(oConfigs.contents) : (oConfigs.contents || null);
	
	if(!this.tabs || !this.contents){
		return false;
	}
	
	this.length = this.tabs.length || 0;
	this.defaultIndex = oConfigs.defaultIndex || 0;
	this.lastIndex = this.defaultIndex;
	this.lastTab = this.tabs[this.lastIndex] || null;
	this.lastContent = this.contents[this.lastIndex] || null;
	this.evtName = oConfigs.evt || 'mouseover';
	this.defaultClass = oConfigs.defaultClass || this.CURRENT_TAB_CLASS;
	this.previousClass = oConfigs.previousClass || '';
	this.hideAll = oConfigs.hideAll || false;
	this.auto = oConfigs.auto || false;
	this.autoSpeed = oConfigs.autoSpeed || 6000;
	this.fadeUp = oConfigs.fadeUp || false;
	this.scroll = oConfigs.scroll || false;
	this.scrollId = oConfigs.scrollId || null;
	this.scrollSpeed = oConfigs.scrollSpeed || 5;
    this.direction = oConfigs.direction || 'V';
	this.activeTag = oConfigs.activeTag || 'IMG';
	this.stepHeight = oConfigs.stepHeight || 0;
	this.stepWidth = oConfigs.stepWidth || 0;
	this.ajax = oConfigs.ajax || false;
	this.ajaxDefaultInfo = this.contents.innerHTML;
	this.aPath = oConfigs.aPath || '';
};
tabView.prototype.timer = null;
tabView.prototype.isPause = false;
tabView.prototype.CURRENT_TAB_CLASS = 'current',

tabView.prototype.init = function(){
	var i, that = this;
	if (this.tabs && this.contents) {
		if (this.auto) {
			this.timer = setTimeout(function(){
				that.autoChange();
			}, that.autoSpeed);
		}
		if (!this.hideAll) {
			YAO.addClass(this.lastTab, this.defaultClass);
			if (!this.ajax && !this.scroll) {
				if (this.lastContent) {
					this.lastContent.style.display = 'block';
				}
			}
			if (this.ajax) {
				this.ajaxTab(this.lastTab);
			}
			if (this.scroll) {
				this.scrollCnt((this.lastContent || this.contents), this.defaultIndex);
			}
		}
		else {
			YAO.removeClass(this.lastTab, this.defaultClass);
		}
		for (i = 0; i < this.length; ++i) {
			if (i !== this.defaultIndex) {
				YAO.removeClass(this.tabs[i], this.CURRENT_TAB_CLASS);
				if (!this.ajax && !this.scroll) {
					this.contents[i].style.display = 'none';
				}
			}
			YAO.on(this.tabs[i], this.evtName, function(index){
				return function(event){
					var evt = null, curClass = (this.tabs[index] === this.tabs[this.defaultIndex]) ? this.defaultClass : this.CURRENT_TAB_CLASS;
					if (!YAO.hasClass(this.tabs[index], curClass)) {
						var currentContent = (this.ajax || (this.scroll && (this.stepHeight || this.stepWidth))) ? this.contents : (this.contents[index] || null);
						
						this.setCurrent(currentContent, index);
						this.lastIndex = index;
					}
					if (this.auto) {
						this.isPause = true;
					}
					evt = event || window.event;
					YAO.stopEvent(evt);
				}
			}(i), this.tabs[i], that);
			YAO.on(this.tabs[i], 'mouseout', function(index){
				return function(){
					var curTab = this.tabs[index];
					if (this.hideAll && this.evtName === 'mouseover') {
						if (this.lastTab === curTab) {
							YAO.removeClass(curTab, (YAO.hasClass(curTab, that.defaultClass) ? this.defaultClass : this.CURRENT_TAB_CLASS));
						}
						if (this.previousClassTab) {
							YAO.removeClass(this.previousClassTab, this.previousClass);
						}
						if (!this.scroll && !this.ajax) {
							this.contents[index].style.display = 'none';
						}
					}
					else {
						if (this.auto) {
							this.isPause = false;
						}
					}
				}
			}(i), this.tabs[i], that);
		}
	}
};
tabView.prototype.autoChange = function(){
	var that = this;
	if (!this.isPause) {
		var currentContent = null, currentTab = null;
		if (this.timer) {
			clearTimeout(this.timer);
			this.timer = null;
		}
		this.lastIndex = this.lastIndex + 1;
		if (this.lastIndex === this.length) {
			this.lastIndex = 0;
		}
		currentContent = this.ajax ? this.contents : (this.contents[this.lastIndex] || null);
		this.setCurrent(currentContent, this.lastIndex);
		this.timer = setTimeout(function(){
			that.autoChange();
		}, this.autoSpeed);
	}
	else {
		this.timer = setTimeout(function(){
			that.autoChange()
		}, this.autoSpeed);
		return false;
	}
};
tabView.prototype.setCurrent = function(curCnt, index){
	var activeObj = null;
	curTab = this.tabs[index];
	YAO.removeClass(this.lastTab, (YAO.hasClass(this.lastTab, this.defaultClass) ? this.defaultClass : this.CURRENT_TAB_CLASS));
	if (curTab === this.tabs[this.defaultIndex]) {
		YAO.addClass(curTab, this.defaultClass);
	}
	else {
		YAO.addClass(curTab, this.CURRENT_TAB_CLASS);
	}
	if (this.previousClass) {
		if (this.previousClassTab) {
			YAO.removeClass(this.previousClassTab, this.previousClass);
		}
		if (index !== 0) {
			YAO.addClass(this.tabs[index - 1], this.previousClass);
			if ((index - 1) === this.defaultIndex) {
				YAO.removeClass(this.tabs[index - 1], this.defaultClass);
			}
			this.previousClassTab = (this.tabs[index - 1]);
		}
	}
	if (!this.scroll && !this.ajax) {
		if (this.lastContent) {
			this.lastContent.style.display = "none";
		}
		if (curCnt) {
			curCnt.style.display = "block";
		}
	}
	
	if (this.fadeUp) {
		activeObj = (curCnt.tagName.toUpperCase() === 'IMG') ? curCnt : curCnt.getElementsByTagName('img')[0];
		if (this.lastContent !== curCnt) {
			YAO.fadeUp(activeObj);
		}
	}
	else {
		if (this.scroll) {
			this.scrollCnt(curCnt, index);
		}
	}
	if (!this.ajax) {
		this.lastContent = curCnt;
	}
	else {
		if (this.ajax) {
			this.ajaxTab(curTab);
		}
	}
	this.lastTab = curTab;
};
tabView.prototype.scrollCnt = function(curCnt, index){
	var activeObj = null, itemHeight = 0, itemWidth = 0, scrollWidth = 0, scrollHeight = 0;
	if (this.activeTag) {
		activeObj = (curCnt.tagName.toUpperCase() === this.activeTag) ? curCnt : curCnt.getElementsByTagName(this.activeTag)[0];
	}
	if (this.direction === 'V') {
		itemHeight = activeObj ? activeObj.offsetHeight : this.stepHeight;
		scrollHeight = -(index * itemHeight);
	}
	else {
		itemWidth = activeObj ? activeObj.offsetWidth : this.stepWidth;
		scrollWidth = -(index * itemWidth);
	}
	YAO.moveElement(this.scrollId, scrollWidth, scrollHeight, this.scrollSpeed);
};
tabView.prototype.ajaxTab = function(curTab){
	var that = this, url = '', ajaxLink = null, loadFn = null, cnt = this.contents, uriData = this.aPath.split('/'), json = (uriData[1].toLowerCase() === '.js' || uriData[1].toLowerCase() === 'json') ? true : false;
	ajaxLink = (curTab.tagName.toUpperCase() === 'A') ? curTab : curTab.getElementsByTagName('a')[0];
	url = uriData[0] + '/' + ajaxLink.rel + uriData[1] + uriData[2] + ajaxLink.rel;
	
	if (curTab === this.tabs[this.defaultIndex]) {
		cnt.innerHTML = this.ajaxDefaultInfo;
	}
	else {
		if(json){
			loadFn = function(jsonData){
				var data = YAO.JSON.parse(jsonData.responseText);
				cnt.innerHTML = data.html;
			}
		}
		else{
			loadFn = cnt.innerHTML;
		}
		YAO.ajaxRequest({
			url: url,
			element: cnt,
			loadFn: loadFn
		});
	}
};

YAO.Carousel = function(oConfig){
	this.btnPrevious = YAO.isString(oConfig.btnPrevious) ? YAO.getEl(oConfig.btnPrevious) : (oConfig.btnPrevious || null);
	this.lnkBtnPrevious = this.btnPrevious.getElementsByTagName('a')[0] || null;
	this.Container = YAO.isString(oConfig.Container) ? YAO.getEl(oConfig.Container) : (oConfig.Container || null);
	this.Scroller = YAO.isString(oConfig.Scroller) ? YAO.getEl(oConfig.Scroller) : (oConfig.Scroller || null);
	this.btnNext = YAO.isString(oConfig.btnNext) ? YAO.getEl(oConfig.btnNext) : (oConfig.btnNext || null);
	this.lnkBtnNext = this.btnNext.getElementsByTagName('a')[0] || null;
	this.items = YAO.isString(oConfig.items) ? this.Container.getElementsByTagName(oConfig.items) : (oConfig.items || null);
	
	if(!this.btnPrevious || !this.lnkBtnPrevious || !this.Container || !this.Scroller || !this.btnNext || !this.lnkBtnNext || !this.items){
		return false;
	}
	
	this.length = this.items.length;
	this.itemWidth = this.items[0].offsetWidth;
	this.itemHeight = this.items[0].offsetHeight;
	this.scrollerWidth = this.itemWidth * this.length;
	this.scrollHeight = this.itemHeight * this.length;
	this.derection = oConfig.derection || 'H';
	this.stepHeight = oConfig.stepHeight || this.itemHeight;
	this.stepWidth = oConfig.stepWidth || this.itemWidth;
	this.groups = this.derection === 'H' ? Math.ceil(this.scrollerWidth / this.stepWidth) : Math.ceil(this.scrollHeight / this.stepHeight);
	this.maxMovedNum = this.derection === 'H' ? (this.groups - (this.Container.offsetWidth / this.stepWidth)) : (this.groups - (this.Container.offsetHeight / this.stepHeight));
	this.scrollSpeed = oConfig.speed || 50;
	
	this.init();
};
YAO.Carousel.prototype.movedNum = 0;
YAO.Carousel.prototype.LNK_BTNS_DISABLED_CLASS = 'dis'; 
YAO.Carousel.prototype.init = function(){
	var oSelf = this;
	if (this.derection === 'H') {
		this.Scroller.style.width = this.scrollerWidth + 'px';
	}
	else {
		this.Scroller.style.height = this.scrollerHeight + 'px';
	}
	this.Container.style.overflow = 'hidden';
	if (this.lnkBtnNext && this.movedNum === this.maxMovedNum) {
		YAO.addClass(this.lnkBtnNext, this.LNK_BTNS_DISABLED_CLASS);
	}
	if (this.lnkBtnPrevious && this.movedNum === 0) {
		YAO.addClass(this.lnkBtnPrevious, this.LNK_BTNS_DISABLED_CLASS);
	}
	YAO.on(this.btnPrevious, 'click', this.scrollPrevious, this.btnPrevious, oSelf);
	YAO.on(this.btnNext, 'click', this.scrollNext, this.btnNext, oSelf);
};
YAO.Carousel.prototype.scrollPrevious = function(event){
	var evt = event || window.event;
	if (this.movedNum > 0) {
		this.movedNum -= 1;
		if (this.lnkBtnNext && YAO.hasClass(this.lnkBtnNext, this.LNK_BTNS_DISABLED_CLASS)) {
			YAO.removeClass(this.lnkBtnNext, this.LNK_BTNS_DISABLED_CLASS);
		}
		if (this.movedNum <= 0) {
			this.movedNum = 0;
			if (this.lnkBtnPrevious) {
				YAO.addClass(this.lnkBtnPrevious, this.LNK_BTNS_DISABLED_CLASS);
			}
		}
		this.scroll(this.movedNum);
	}
	YAO.stopEvent(evt);
};
YAO.Carousel.prototype.scrollNext = function(event){
	var evt = event || window.event;
	if (this.movedNum < this.maxMovedNum) {
		this.movedNum += 1;
		if (this.lnkBtnPrevious && YAO.hasClass(this.lnkBtnPrevious, this.LNK_BTNS_DISABLED_CLASS)) {
			YAO.removeClass(this.lnkBtnPrevious, this.LNK_BTNS_DISABLED_CLASS);
		}
		if (this.movedNum >= this.maxMovedNum) {
			this.movedNum = this.maxMovedNum;
			if (this.lnkBtnNext) {
				YAO.addClass(this.lnkBtnNext, this.LNK_BTNS_DISABLED_CLASS);
			}
		}
		this.scroll(this.movedNum);
	}
	YAO.stopEvent(evt);
}; 
YAO.Carousel.prototype.scroll = function(steps){
	var scrollWidth = 0, scrollHeight = 0;
	if (this.derection === 'H') {
		if (this.stepWidth) {
			scrollWidth = -(this.stepWidth * steps);
		}
		else {
			scrollWidth = -(this.itemWidth * steps);
		}
	}
	else {
		if (this.stepHeight) {
			scrollHeight = -(this.stepHeight * steps);
		}
		else {
			scrollHeight = -(this.itemHeight * steps);
		}
	}
	YAO.moveElement(this.Scroller, scrollWidth, scrollHeight, this.scrollSpeed);
};

Download：ytabs-images-headline.rar