js仿京东轮播效果选项卡套选项卡使用

本文实例为大家分享了射流研究…仿京东轮播效果的具体代码，实现选项卡套用选项卡，供大家参考，具体内容如下

效果图：

代码：

html health eta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title无标题文档/title style * { margin 33600；划水：0;} ul { list-style :无；} img { border:0} #选项卡{ width:1000px高度：500 px余量：50px汽车；} #选项卡标题{宽度：200像素高度：500 px显示：内嵌块；} #选项卡。标题Li { width :200 px h8 :125 pxfloat 3360 left线高：125 px文本对齐：居中；font-size :30 px背景# f1f1f1边框-bottom:1px虚线# 000;} #选项卡标题李。活动{背景： # fff} #选项卡标题李：悬停{背景： # fff} #选项卡。内容{宽度：799像素高度：500 px右浮动：显示：内嵌块；位置：相对；border : none border : none } #选项卡。内容img { position : absolutetop :0 left :0宽度宽度：799像素高度：500 px} #选项卡。内容ul { position:absolute绝对值宽度宽度：799像素宽度：45像素底部：0;左转：0过滤器(alpha :80)；opacity:0.8背景技术： # 000;} #选项卡。内容ul Li { float : leftheight :45 px线高：45 px背景技术： # D5 D5；右边框：1px实心# fffcursor:pointer指针指针；文本对齐：居中；} #选项卡。内容ul Li。活动{背景：红色；} #选项卡。内容ul li:悬停{背景：红色；}/style脚本窗口。onload=function(){ var tab=document。getelementbyid(' tab ')；var title=tab。getelementsbyclassname(' title ')[0]；李=题目。getelementsbytagname(' Li ')；var main=tab。getelementsbyclassname(' main ')[0]；var img=主。getelementsbytagname(' img ')[0]；var ul=main。getelementsbytagname(' ul ')[0]；李=ul。getelementsbytagname(' Li ')；var arr=[ { title : '最热团购，副标题： ['最热团购1','最热团购2','最热团购3']，pic : [ 'img/tab/1-1.png '，' img/tab/1-2.png '，' img/tab/1-3.png' ] }，{ title : '商城特惠，副标题： ['商城特惠1','商城特惠2','商城特惠3','商城特惠4']，pic : [ 'img/tab/2-1.png '，' img/tab/2-2.png '，' img/tab/2-3.png '，' img/tab/2-4.png' ] }，{ title : '名品推荐，副标题： ['名品推荐1','名品推荐2','名品推荐3','名品推荐4','名品推荐5']，pic : [ 'img/tab/3-1.png '，' img/tab/3-2.png '，' img/tab/3-3.png '，' img/tab/3-4.png '，' img/tab/3-5.png' ] }，{ title : '缤纷活动，副标题： ['缤纷活动1','缤纷活动2','缤纷活动3','缤纷活动4']，pic : [ 'img/tab/4-1.png '，' img/tab/4-2.png '，' img/tab/4-3.png '，]}]；//初始化for(var I=0；一、长度；i ) { //大选项卡的标题var OLi=文档。创建元素(“李”)；oLi.innerHTML=arr[i].标题；奥利。指数=I；奥利。onclick=function(){ highlight(this)；ul.innerHTML=更改选项卡(这。索引)；}标题。append child(OLi)；} ChangeTab(0)；函数changeTab(num) { //大选项卡的内容img.src=arr[num].pic[1]；//小标题for(var j=0；j arr[num]。副标题。长度；j){ OLi=文档。创建元素(“李”)；oLi.innerHTML=arr[num].副标题[j]；奥利。风格。宽度=数学。楼层(parsent(800/arr[num])。副标题。长度)-2)' px '；奥利。index=j；奥利。onclick=function(){ highlight(this)；这个。父节点。previouselementsibling。src=arr[num].pic[这个。索引]；} ul。append child(OLi)；} }函数高光(ele){ var AlI=ele。父节点。儿童；for(var I=0；I AlI . len thi){ AlI[I].class name=} ele . class name=' active } }/script/head dydiv id=' tab ' ul class=' title '/ul div ' content ' div=' main ' img ul/ul/div/div/body/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。