js选项卡切换文字图片选项卡设置延迟加载自动切换



91 361 121



特效描述:选项卡切换 文字图片 选项卡设置 延迟加载 自动切换,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

加群请备注:从官网了解到