基于js实现选项卡内嵌图片滚动切换代码



72 287 96



特效描述:基于js实现 选项卡 内嵌图片 滚动切换,基于js实现选项卡内嵌图片滚动切换代码

代码结构

1. HTML代码

	<div class='TTSlider' id='TTSlider'>
		<div  class='TTSliderTitle'>
			 <ul>
			 	<li class='cur'><div><a href=''><img src='images/one.jpg'/></a><a href=''>栏目一</a></div></li>
			 	<li><div><a href=''><img src='images/one.jpg'/></a><a href=''>栏目二</a></div></li>
			 	<li><div><a href=''><img src='images/one.jpg'/></a><a href=''>栏目三</a></div></li>
			 	<li><div><a href=''><img src='images/one.jpg'/></a><a href=''>栏目四</a></div></li>
			 	<li><div><a href=''><img src='images/one.jpg'/></a><a href=''>栏目五</a></div></li>
			 	<li><div><a href=''><img src='images/one.jpg'/></a><a href=''>栏目六</a></div></li>
			 	<li><div><a href=''><img src='images/one.jpg'/></a><a href=''>栏目七</a></div></li>
			 </ul>
		 </div>
		 <div class='TTSliderPic'>
		 	<div href='javascript:;' id='TTSliderPrevBtn' class='TTSliderPrevBtn'><a href='javascript:;'></a></div>
		 	<div href='javascript:;' id='TTSliderNextBtn' class='TTSliderNextBtn'><a href='javascript:;'></a></div>
		 	<div class='TTSliderPicList'>
			 	<ul class='show'>
			 		<li class='on'><a href=''><img src='images/1.jpg'/></a><p>35元</p></li>
			 		<li><a href=''><img src='images/2.jpg'/></a><p>35元</p></li>
			 		<li><a href=''><img src='images/3.jpg'/></a><p>35元</p></li>
			 		<li><a href=''><img src='images/4.jpg'/></a><p>35元</p></li>
			 		<li><a href=''><img src='images/5.jpg'/></a><p>35元</p></li>
			 		<li><a href=''><img src='images/11.jpg'/></a><p>35元</p></li>
			 		<li><a href=''><img src='images/4.jpg'/></a><p>35元</p></li>
			 		<li><a href=''><img src='images/5.jpg'/></a><p>35元</p></li>
			 	</ul>
			 	<ul>
			 		<li><a href=''><img src='images/11.jpg'/></a><p>35元</p></li>
			 		<li><a href=''><img src='images/22.jpg'/></a><p>35元</p></li>
			 		<li><a href=''><img src='images/33.jpg'/></a><p>75元</p></li>
			 		<li><a href=''><img src='images/44.jpg'/></a><p>75元</p></li>
			 		<li><a href=''><img src='images/11.jpg'/></a><p>75元</p></li>
			 		<li><a href=''><img src='images/44.jpg'/></a><p>35元</p></li>
			 		<li><a href=''><img src='images/55.jpg'/></a><p>85元</p></li>
			 	</ul>
			 	<ul>
			 		<li><a href=''><img src='images/2.jpg'/></a><p>35元</p></li>
			 		<li><a href=''><img src='images/22.jpg'/></a><p>35元</p></li>
			 		<li><a href=''><img src='images/33.jpg'/></a><p>75元</p></li>
			 		<li><a href=''><img src='images/44.jpg'/></a><p>75元</p></li>
			 		<li><a href=''><img src='images/11.jpg'/></a><p>75元</p></li>
			 		<li><a href=''><img src='images/44.jpg'/></a><p>35元</p></li>
			 		<li><a href=''><img src='images/55.jpg'/></a><p>85元</p></li>
			 	</ul>
			 	<ul>
			 		<li><a href=''><img src='images/5.jpg'/></a><p>35元</p></li>
			 		<li><a href=''><img src='images/33.jpg'/></a><p>75元</p></li>
			 		<li><a href=''><img src='images/44.jpg'/></a><p>75元</p></li>
			 		<li><a href=''><img src='images/11.jpg'/></a><p>75元</p></li>
			 		<li><a href=''><img src='images/44.jpg'/></a><p>35元</p></li>
			 		<li><a href=''><img src='images/55.jpg'/></a><p>85元</p></li>
			 	</ul>
			 	<ul>
			 		<li><a href=''><img src='images/3.jpg'/></a><p>35元</p></li>
			 		<li><a href=''><img src='images/33.jpg'/></a><p>75元</p></li>
			 		<li><a href=''><img src='images/44.jpg'/></a><p>75元</p></li>
			 		<li><a href=''><img src='images/11.jpg'/></a><p>75元</p></li>
			 		<li><a href=''><img src='images/44.jpg'/></a><p>35元</p></li>
			 		<li><a href=''><img src='images/55.jpg'/></a><p>85元</p></li>
			 	</ul>
			 	<ul>
			 		<li><a href=''><img src='images/11.jpg'/></a><p>35元</p></li>
			 		<li><a href=''><img src='images/22.jpg'/></a><p>35元</p></li>
			 		<li><a href=''><img src='images/33.jpg'/></a><p>75元</p></li>
			 		<li><a href=''><img src='images/44.jpg'/></a><p>75元</p></li>
			 		<li><a href=''><img src='images/11.jpg'/></a><p>75元</p></li>
			 		<li><a href=''><img src='images/44.jpg'/></a><p>35元</p></li>
			 		<li><a href=''><img src='images/55.jpg'/></a><p>85元</p></li>
			 		<li><a href=''><img src='images/44.jpg'/></a><p>75元</p></li>
			 		<li><a href=''><img src='images/11.jpg'/></a><p>75元</p></li>
			 		<li><a href=''><img src='images/44.jpg'/></a><p>35元</p></li>
			 	</ul>
			 	<ul>
			 		<li><a href=''><img src='images/4.jpg'/></a><p>35元</p></li>
			 		<li><a href=''><img src='images/22.jpg'/></a><p>35元</p></li>
			 		<li><a href=''><img src='images/33.jpg'/></a><p>75元</p></li>
			 		<li><a href=''><img src='images/44.jpg'/></a><p>75元</p></li>
			 		<li><a href=''><img src='images/11.jpg'/></a><p>75元</p></li>
			 		<li><a href=''><img src='images/44.jpg'/></a><p>35元</p></li>
			 		<li><a href=''><img src='images/44.jpg'/></a><p>75元</p></li>
			 		<li><a href=''><img src='images/11.jpg'/></a><p>75元</p></li>
			 		<li><a href=''><img src='images/44.jpg'/></a><p>35元</p></li>
			 		<li><a href=''><img src='images/55.jpg'/></a><p>85元</p></li>
			 	</ul>
			 </div>
		 </div>
	</div>
	<script>
	window.onload=function()
	{
		var oTTSlider=document.getElementById('TTSlider');
		var oTTSliderTitle=getByClass('TTSliderTitle',oTTSlider,'div')[0];
		var aSubNav=oTTSliderTitle.getElementsByTagName('li');
		var oTTSliderPrevBtn=document.getElementById('TTSliderPrevBtn');
		var oTTSliderNextBtn=document.getElementById('TTSliderNextBtn');
		var oTTSliderPicList=getByClass('TTSliderPicList',oTTSlider,'div')[0];
		var aItem=oTTSliderPicList.getElementsByTagName('ul');
		var len=aItem.length;
		var showIndex=aItemImgWidth=iNow=0;
		var aEle=[];
		for(var i=0;i<len;i++)
		{  
			var aItemImgs=aItem[i].getElementsByTagName('li');
			if(!aItemImgWidth)
			{
				aItemImgWidth=aItemImgs[0].offsetWidth;
			}
			aEle.push(aItemImgs);	//存入数组,考虑到有多个轮播,且每个轮播里面的图片个数可能一致.
			aSubNav[i].index=i;
			aSubNav[i].onmouseover=function()//切换
			{
				var index=showIndex=this.index;  
				for(var j=0;j<len;j++)
				{
					if(j!=index)
					{
							aItem[j].className='';
							aSubNav[j].className='';
					}
				}
				aSubNav[index-1] && (aSubNav[index-1].className='noneBorRight' );
				if(index>0)
				{
					(aSubNav[0].getElementsByTagName('div')[0].style.borderLeft='1px solid #C3C5C7');
				}
				else
				{
					aSubNav[0].getElementsByTagName('div')[0].style.borderLeft='2px solid #C3C5C7';
				}
				aSubNav[index].className='cur';
				aItem[index].className='show';
			}
		}
		for(var i=0;i<len;i++)
		{
			var num=aEle[i].length;
			if(aItem[i].className=='show')
			{
				showIndex=i;
			}
			aItem[i].style.width=num*(aItemImgWidth)+'px'
		}
		oTTSliderNextBtn.onclick=function()
		{
			var maxNum=aEle[showIndex].length-1;
			aItem[showIndex].insertBefore(aEle[showIndex][maxNum],aEle[showIndex][0]);
			aItem[showIndex].style.left=-aItemImgWidth+'px';
			doMove(aItem[showIndex],0);
		}
		oTTSliderPrevBtn.onclick=function()
		{
			doMove(aItem[showIndex],-(aItemImgWidth),function(){
				aItem[showIndex].style.left=0;
				aItem[showIndex].appendChild(aEle[showIndex][0])
			});
		}
		function doMove(o,t,fn)
		{
			clearInterval(o.timer);
			o.timer=setInterval(function(){
				var is= (t-getStyle(o,'left'))/8;
				is= is>0?Math.ceil(is):Math.floor(is);
				if(t==o.offsetLeft)
				{
					clearInterval(o.timer);
					(typeof fn==='function') && fn();
				}
				else
				{
					o.style.left=o.offsetLeft+is+'px';
				}
			},30)
		}
		function getStyle(o,a)
		{
			return o.currentStyle ? parseFloat(o.currentStyle[a]) : parseFloat(getComputedStyle(o,false)[a]);
		}
		function getByClass(s,p,e)
		{
			var reg=new RegExp('(\\b)'+s+'(\\b)');
			var aElement=(p||document).getElementsByTagName(e||'*');
			var aResult=[];
			for(var i=0;i<aElement.length;i++)
			{
				reg.test(aElement[i].className) && aResult.push(aElement[i]);
			}
			return aResult;
		}
	}
	</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动流动 滚动切换 滑动选项卡切换 自动滚动图片轮播 选项卡切换 滑动手风琴 滑动星星打分 切换按钮 form表单 其他更多 鼠标悬停 滚动切换 列表切换 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

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