特效描述:基于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>