本文实例为大家分享了js仿京东轮播效果的具体代码,实现选项卡套用选项卡,供大家参考,具体内容如下
效果图:
& lt; html>
& lt; head>
& lt;元http-equiv=? type”内容=" text/html;utf - 8字符集="/比;
& lt; title>无标题文档& lt;/title>
& lt; style>
*{保证金:0;填充:0;}
ul {list-style:没有;}img{边界:0;}
#标签{宽度:1000 px;高度:500 px;保证金:50 px汽车;}
#标签.title{宽度:200 px;高度:500 px;显示:inline-block;}
李#标签.title{宽度:200 px;高度:125 px;浮动:离开,行高:125 px; text-align:中心;字体大小:30 px;背景:# f1f1f1;边界底部:1 px点缀# 000;}
#标签.title李。活跃的{背景:# fff;}
#标签.title李:悬停{背景:# fff;}
#标签.content{宽度:799 px;高度:500 px;浮动:正确的,显示:inline-block;位置:相对;边界:没有;边界:没有;}
#标签.content img{:绝对;:0;左:0;宽度:799 px;高度:500 px;}
#标签.content ul{位置:绝对的,宽度:799 px;高度:45 px;底:0;左:0;过滤器(α:80);不透明度:0.8;背景:# 000;}
李#标签.content ul{浮动:左;高度:45 px;行高:45 px;背景:# d5d5d5;边境:1 px固体# fff;游标:指针;text-align:中心;}
李#标签.content ul。活跃的{背景:红色;}
#标签.content ul李:悬停{背景:红色;}
& lt;/style>
& lt; script>
窗口。onload=function () {
var标签=. getelementbyid(“选项卡”);
var title=tab.getElementsByClassName(“标题”)[0];
var titleLi=title.getElementsByTagName(‘李’);
主要var=tab.getElementsByClassName(主要)[0];
var img=main.getElementsByTagName (img) [0];
var ul=main.getElementsByTagName (ul) [0];
var subtitleLi=ul.getElementsByTagName(‘李’);
var arr=(
{
标题:“最热团购”,
副标题:['最热团购1 ','最热团购2 ','最热团购3 '),
图片:(
“img/标签/1 - 1. - png”,
“img/标签/1 - 2. - png”,
“img/标签/1 - 3. - png”
]
},
{
标题:“商城特惠”,
副标题:['商城特惠1 ','商城特惠2》,“商城特惠3 ','商城特惠4 '),
图片:(
“img/标签/2 - 1. - png”,
“img/标签/2 - 2. - png”,
“img/标签/2 - 3. - png”,
“img/标签/2 - 4. - png”
]
},
{
标题:“名品推荐”,
副标题:['名品推荐1 ','名品推荐2 ','名品推荐3 ','名品推荐4 ','名品推荐5 '),
图片:(
“img/标签/3 - 1. - png”,
“img/标签/3 - 2. - png”,
“img/标签/3 - 3. - png”,
“img/标签/3 - 4. - png”,
“img/标签/3 - 5. - png”
]
},
{
标题:“缤纷活动”,
副标题:['缤纷活动1 ','缤纷活动2》,“缤纷活动3 ','缤纷活动4 '),
图片:(
“img/标签/4 - 1. - png”,
“img/标签/4 - 2. - png”,
“img/标签/4 - 3. - png”,
“img/标签/4 - 3. - png”,
]
}
];//初始化
(var=0;我& lt;arr.length;我+ +){//大选项卡的标题
var奥利=document.createElement(‘李’);
奥利。innerHTML=arr[我].title;
奥利。指数=我;
奥利。onclick=function () {
突出(这个);
ul。innerHTML=";
changeTab (this.index);
}
title.appendChild(奥利);
}
changeTab (0);
函数changeTab (num) {//大选项卡的内容
img。src=https://www.yisu.com/zixun/arr (num) .pic [1];//小标题
(var j=0;j <加勒比海盗(num) .subtitle.length;j + +) {
奥利=document.createElement(‘李’);
奥利。innerHTML arr=(num) .subtitle [j];
oLi.style。宽度=数学。地板(方法(800/arr (num) .subtitle.length) - 2) +“px”;
奥利。指数=j;
奥利。onclick=function () {
突出(这个);
this.parentNode.previousElementSibling。src=https://www.yisu.com/zixun/arr (num) .pic [this.index];
}
ul.appendChild(奥利);
}
}
函数突出(避署){
阿里var=ele.parentNode.children;
(var=0;我js仿京东轮播效果选项卡套选项卡使用
