js選項卡切換文字圖片選項卡設置延遲加載自動切換



94 373 125



特效描述:選項卡切換 文字圖片 選項卡設置 延遲加載 自動切換,javascript特效多功能圖片延遲加載選項卡自動切換內容,支持多種選項卡切換、是一種對瀏覽器優化的方式,同時減少服務器的請求負擔

代碼結構

1. HTML代碼

<div class="area"> 
	<div class="tab_area" id="tab1"> 
		<ul> 
			<li id="tab1_1" class="current"><a href="http://www.17sucai.com/">jQuery 特效</a></li>
			<li id="tab1_2"><a href="http://www.17sucai.com/">javascript 特效</a></li> 
			<li id="tab1_3"><a href="http://www.17sucai.com/">css3 特效</a></li> 
		</ul>			
	</div> 
	<div class="img_area">
		<ul id="tab1_1_body">
			<li><a href="http://www.17sucai.com/"><img width="387" height="241" alt="jquery特效制作banner圖片滾動播放、按鈕控制圖片滾動、選項卡等基于多功能jquery slide插件" src="images/1.jpg" /></a></li> 
		</ul>
		<ul id="tab1_2_body">
			<li><a href="http://www.17sucai.com/"><img width="387" height="241" alt="jquery特效插件Validform制作一行代碼搞定整站的表單驗證" src="images/2.jpg" /></a></li>
		</ul>
		<ul id="tab1_3_body">
			<li><a href="http://www.17sucai.com/"><img width="387" height="241" alt="jquery特效制作 slide 圖片窗簾式滾動" src="images/3.jpg" /></a></li>				
		</ul>
	</div>
</div><!--area end-->
<div class="area" > 
	<div class="tab_area"  id="tab2"> 
		<ul> 
			<li id="tab2_1" class="current"><a href="http://www.17sucai.com/">jQuery 特效</a></li>
			<li id="tab2_2"><a href="http://www.17sucai.com/">javascript 特效</a></li> 
			<li id="tab2_3"><a href="http://www.17sucai.com/">css3 特效</a></li>
		</ul>			
	</div> 
	<div class="img_area">
		<ul id="tab2_1_body">
			<li><a href="http://www.17sucai.com/"><img width="387" height="241" alt="霓虹燈文字效果使用jQuery和CSS" src="images/1.jpg" /></a></li> 
		</ul>
		<ul id="tab2_2_body">
			<li><a href="http://www.17sucai.com/"><img width="387" height="241" alt="靈活的網頁:一個jQuery分頁的解決方案" src="images/2.jpg" /></a></li>
		</ul>
		<ul id="tab2_3_body">
			<li><a href="http://www.17sucai.com/"><img width="387" height="241" alt="贊助翻轉和CSS jQuery的墻" src="images/3.jpg" /></a></li>
		</ul>
	</div>
</div><!--area end-->
<script type="text/javascript"> 
function $i(id){
	return document.getElementById(id);
}
function tabswitch(c, config){
	this.config = config ? config : {start_delay:3000, delay:1500};
	this.container = $i(c);
	this.pause = false;
	this.nexttb = 1;
	this.tabs = this.container.getElementsByTagName('dt');
	var _this = this;
	if(this.tabs.length<1)this.tabs = this.container.getElementsByTagName('li');
	for(var i = 0; i < this.tabs.length; i++){
		var _ec = this.tabs[i].getElementsByTagName('span');
		if(_ec.length<1)_ec = this.tabs[i].getElementsByTagName('a');
		if(_ec.length<1){
			_ec = this.tabs[i]
		}else{
			_ec = _ec[0];
		}
		_ec.onmouseover = function(e) {
			_this.pause = true;
			var ev = !e ? window.event : e;
			_this.start(ev, false, null);
		};
		_ec.onmouseout = function() {
			_this.pause = false;
		};
		try{
			$i(this.tabs[i].id + '_body').onmouseover = function(){
				_this.pause = true;
			};
			$i(this.tabs[i].id + '_body').onmouseout = function(){
				_this.pause = false;
			};
		}catch(e){}
	}
	if ($i(c + '_sts')) {
		var _sts = $i(c + '_sts');
		var _step = _sts.getElementsByTagName('li');
		if(_step.length<1)_step = _sts.getElementsByTagName('div');
		_step[0].onclick = function() {
			if (_this.tabs[_this.tabs.length-1].className.indexOf('current') > -1) {
				_this.nexttb = _this.tabs.length + 1;
			};
			_this.nexttb = _this.nexttb - 2 < 1 ? _this.tabs.length : _this.nexttb - 2;
			//alert(_this.nexttb);
			_this.start(null, null, _this.nexttb);
		};
		_step[1].onclick = function() {
			_this.nexttb = _this.nexttb < 1 ? 1 : _this.nexttb;
			_this.start(null, null, _this.nexttb);
		};
	};
	this.start = function(e, r, n){
		if(_this.pause && !e)return;
		if(r){
			curr_tab = $i(_this.container.id + '_' + rand(4));
		}else{
			if(n){				
				curr_tab = $i(_this.container.id + '_' + _this.nexttb);
			}else{
				curr_tab = e.target ? e.target : e.srcElement;
				if(curr_tab.id=="")curr_tab = curr_tab.parentNode;
			}
		}
		var tb = curr_tab.id.split("_");
		for(var i = 0; i < _this.tabs.length; i++){
			if(_this.tabs[i]==curr_tab){
				_this.tabs[i].className="current";
				try{					
					$i(_this.tabs[i].id + '_body').style.display = "block";
				}catch(e){}
			}else{
				_this.tabs[i].className="";
				try{
					$i(_this.tabs[i].id + '_body').style.display = "none";
				}catch(e){}
			}
		}
		_this.nexttb = parseInt(tb[tb.length-1]) >= _this.tabs.length ? 1 : parseInt(tb[tb.length-1]) + 1;
	};
}
//設置
var tab1,tab2;
function init_load(){
    if ($i('tab1')) {
		tab1 = new tabswitch('tab1', {});
		setInterval("tab1.start(null, null, 1);", 6000);
	}
	if ($i('tab2')) {
		tab2 = new tabswitch('tab2', {});
		setInterval("tab2.start(null, null, 1);", 6000);
	}
}
if(window.attachEvent){
    window.attachEvent("onload",init_load);
}else if(window.addEventListener){
    window.addEventListener("load",init_load,false);
}
</script> 



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 滑動星星打分 焦點圖 幻燈片 輪播圖 bar焦點圖 其他 純圖片輪播 圖片輪播 選項卡自動切換 鼠標滑過 鼠標懸停 跟隨鼠標移動
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子