素材网 素材网

js图片组合选项卡滚动切换代码

下载资源()次

阅读次数()次

发布时间:2015-08-12

js图片组合选项卡滚动切换代码
分享到:

用法简介:

来源:xw素材网

js图片组合选项卡滚动切换代码。
文件引用:

<script type="text/javascript" src="js/global.js"></script>
<script type="text/javascript">
window.onload = function(){
	var aDiv = getClass(document,'.list');
	var	oUl = getClass(document,'.nav')[0],
	   aBtn = getTagName(oUl,'li');	   
	var timer = null,t = 0,b = 0;	
	fnAutoPlay(aDiv[0])
	//自动播放每一组播放完回调自已切换下一组
	function fnAutoPlay(e,n){
		var aLi = getTagName(e,'li'),
			 aP = getTagName(e,'p');
		var n = n||0;
		fnActive(aLi,aP,n%aLi.length)
		timer = setInterval(function(){
			n++	
			b = n
			fnActive(aLi,aP,n%aLi.length)			
			if(n%aLi.length === 0){
				clearInterval(timer)
				t++					
				fnActive(aBtn,aDiv,t%aDiv.length)
				fnAutoPlay(aDiv[t%aDiv.length])		
			}
		},1000)		
	}	
	for(var i = 0; i < aDiv.length; i++){
		fnMouse(aDiv[i])
	}
	//鼠标移入停止播放	
	function fnMouse(e){
		var aLi = getTagName(e,'li'),
			 aP = getTagName(e,'p'),
			 aImg = getTagName(e,'img');
		for(var i = 0; i < aLi.length; i++){
			(function(index){
				aP[index].onmouseover = aLi[index].onmouseover = function(){	
					clearInterval(timer)
					fnActive(aLi,aP,index)
				}
				aP[index].onmouseout = aLi[index].onmouseout = function(){
					fnAutoPlay(e,index)						
				}
			})(i)			
		}
	}
	function fnActive(ele,ele2,n){
		for(var i = 0 ; i < ele.length; i++) {
			ele[i].className = ''
			ele2[i].style.display = 'none'
		}		
		ele[n].className = 'cur'
		ele2[n].style.display = 'block'
	}
	//主菜单移入事件 如果不是选中状态清0 当前下的所有li的Active清空,默认第一个选中
	//主菜单移开事件 如果当前选中状态记录N的值,移开后继续从N开始
	for(var i = 0; i < aBtn.length; i++){
		(function(index){
			aBtn[index].onmouseover = function(){				
				clearInterval(timer)
				if(aBtn[index].className != 'cur'){
					b = 0
					var aLi = getTagName(aDiv[index],'li')
					var  aP = getTagName(aDiv[index],'p')
					fnActive(aLi,aP,b)			
				}
				fnActive(aBtn,aDiv,index)
			}
			aBtn[index].onmouseout = function(){
				fnAutoPlay(aDiv[index],b)
				t = index				
			}
		})(i)		
	}	
}
</script>


   

相关标签:

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。