js書寫選項卡和輪播圖的結合(這個寫的不是很好)
html:所有程式碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="tab_car.css">
<script src="tab_car.js"></script>
</head>
<body>
<div class="all">
<nav id="nav">
<div>熱播</div>
<div>電視</div>
<div>電影</div>
<div>動漫</div>
</nav>
<div id="xiaall">
<section>
<div id="allpic1">
<action class="rua">澳門賭場</action>
<div class="onepic"></div>
<div class="twopic"></div>
<div class="threepic"></div>
<action id="left1"><</action>
<action id="right1">></action>
</div>
<ul class="ul">
<li>澳門賭場</li>
<li>澳門賭場</li>
<li>澳門賭場</li>
<li>澳門賭場</li>
<li>澳門賭場</li>
<li>澳門賭場</li>
<li>澳門賭場</li>
<li>澳門賭場</li>
<li>澳門賭場</li>
<li>澳門賭場</li>
</ul>
</section>
<section>
<div id="allpic2">
<action class="rua">正式上線</action>
<div class="onepic2"></div>
<div class="twopic2"></div>
<div class="threepic2"></div>
<action id="left2"><</action>
<action id="right2">></action>
</div>
<ul class="ul">
<li>正式上線</li>
<li>正式上線</li>
<li>正式上線</li>
<li>正式上線</li>
<li>正式上線</li>
<li>正式上線</li>
<li>正式上線</li>
<li>正式上線</li>
<li>正式上線</li>
<li>正式上線</li>
</ul>
</section>
<section>
<div id="allpic3">
<action class="rua">性感荷官</action>
<div class="onepic3"></div>
<div class="twopic3"></div>
<div class="threepic3"></div>
<action id="left3"><</action>
<action id="right3">></action>
</div>
<ul class="ul">
<li>性感荷官</li>
<li>性感荷官</li>
<li>性感荷官</li>
<li>性感荷官</li>
<li>性感荷官</li>
<li>性感荷官</li>
<li>性感荷官</li>
<li>性感荷官</li>
<li>性感荷官</li>
<li>性感荷官</li>
</ul>
</section>
<section>
<div id="allpic4">
<action class="rua">線上發牌</action>
<div class="onepic4"></div>
<div class="twopic4"></div>
<div class="threepic4"></div>
<action id="left4"><</action>
<action id="right4">></action>
</div>
<ul class="ul">
<li>線上發牌</li>
<li>線上發牌</li>
<li>線上發牌</li>
<li>線上發牌</li>
<li>線上發牌</li>
<li>線上發牌</li>
<li>線上發牌</li>
<li>線上發牌</li>
<li>線上發牌</li>
<li>線上發牌</li>
</ul>
</section>
</div>
</div>
</body>
</html>
css所有程式碼:
.all{
height:340px;
width:240px;
border:1px solid #000;
margin:100px auto;
}
#nav{
height:33px;
width:220px;
margin:0 auto;
display: flex;
justify-content: center;
}
#nav>div{
height:33px;
width:55px;
/*background:green;*/
font-size:18px;
line-height:33px;
text-align:center;
border-bottom:3px solid #ccc;
position:relative;
}
#nav>div:hover{
color:blue;
border-bottom:3px solid blue;
cursor: pointer;
}
#nav>div:nth-of-type(1):after,#nav>div:nth-of-type(2):after,#nav>div:nth-of-type(3):after{
content:"|";
position:absolute;
right:-2px;
top:-1px;
color:grey;
}
/*以上是導航條*/
#xiaall{
height:300px;
width:220px;
/*background:greenyellow;*/
margin:0 auto;
}
#xiaall>section{
height:100%;
width:100%;
/*background:red;*/
display:none;
}
#allpic1{
height:120px;
width:220px;
background:green;
margin:0 auto;
position:relative;
}
#allpic1:hover:after{
content:"";
position:absolute;
left:0;
top:0;
height:100%;
width:100%;
background:rgba(0,0,0,0.5);
}
#allpic2:hover:after{
content:"";
position:absolute;
left:0;
top:0;
height:100%;
width:100%;
background:rgba(0,0,0,0.5);
}
#allpic3:hover:after{
content:"";
position:absolute;
left:0;
top:0;
height:100%;
width:100%;
background:rgba(0,0,0,0.5);
}
#allpic4:hover:after{
content:"";
position:absolute;
left:0;
top:0;
height:100%;
width:100%;
background:rgba(0,0,0,0.5);
}
#allpic1:hover{
cursor: pointer;
}
#allpic2{
height:120px;
width:220px;
background:green;
margin:0 auto;
position:relative;
}
#allpic2:hover{
cursor: pointer;
}
#allpic3{
height:120px;
width:220px;
background:green;
margin:0 auto;
position:relative;
}
#allpic3:hover{
cursor: pointer;
}
#allpic4{
height:120px;
width:220px;
background:green;
margin:0 auto;
position:relative;
}
#allpic4:hover{
cursor: pointer;
}
.onepic{
height:100%;
width:100%;
background:url("images/1.1.jpg");
/*display: none;*/
}
.twopic{
height:100%;
width:100%;
background:url("images/1.2.jpg");
display: none;
}
.threepic{
height:100%;
width:100%;
background:url("images/1.3.jpg");
display: none;
}
.onepic2{
height:100%;
width:100%;
background:url("images/2.1.jpg");
/*display: none;*/
}
.twopic2{
height:100%;
width:100%;
background:url("images/2.2.jpg");
display: none;
}
.threepic2{
height:100%;
width:100%;
background:url("images/2.3.jpg");
display: none;
}
.onepic3{
height:100%;
width:100%;
background:url("images/3.1.jpg");
/*display: none;*/
}
.twopic3{
height:100%;
width:100%;
background:url("images/3.2.jpg");
display: none;
}
.threepic3{
height:100%;
width:100%;
background:url("images/3.3.jpg");
display: none;
}
.onepic4{
height:100%;
width:100%;
background:url("images/4.1.jpg");
/*display: none;*/
}
.twopic4{
height:100%;
width:100%;
background:url("images/4.2.jpg");
display: none;
}
.threepic4{
height:100%;
width:100%;
background:url("images/4.3.jpg");
display: none;
}
.ul{
height:160px;
width:220px;
list-style:none;
display: flex;
flex-wrap:wrap;
padding:0;
}
li:hover{
cursor: pointer;
}
.ul>li{
height:32px;
width:110px;
line-height:32px;
text-align:center;
}
#left1,#right1,#left2,#right2,#left3,#right3,#left4,#right4{
height:50px;
width:30px;
background:rgba(0,0,0,0);
position: absolute;
color:white;
text-align:center;
line-height:50px;
z-index:5;
}
#left1:hover,#right1:hover,#left2:hover,#right2:hover,#left3:hover,#right3:hover,#left4:hover,#right4:hover{
background:rgba(0,0,0,0.5);
}
#left1,#left2,#left3,#left4{
left:0;
top:35px;
}
#right1,#right2,#right3,#right4{
right:0;
top:35px;
}
.rua{
height:33px;
width:100px;
background: rgba(0,0,0,0.5);
color:white;
line-height:33px;
position:absolute;
left:0;
bottom:0;
}
js所有程式碼：
window.onload=function(){
var oNav=document.getElementById("nav");
var aDiv=oNav.getElementsByTagName("div");
var oXiaall=document.getElementById("xiaall");
var aSection=oXiaall.getElementsByTagName("section");
var oAllPic1=document.getElementById("allpic1");
var aPic1=oAllPic1.getElementsByTagName("div");
var oLeft1=document.getElementById("left1");
var oRight1=document.getElementById("right1");
var oAllPic2=document.getElementById("allpic2");
var aPic2=oAllPic2.getElementsByTagName("div");
var oLeft2=document.getElementById("left2");
var oRight2=document.getElementById("right2");
var oAllPic3=document.getElementById("allpic3");
var aPic3=oAllPic3.getElementsByTagName("div");
var oLeft3=document.getElementById("left3");
var oRight3=document.getElementById("right3");
var oAllPic4=document.getElementById("allpic4");
var aPic4=oAllPic4.getElementsByTagName("div");
var oLeft4=document.getElementById("left4");
var oRight4=document.getElementById("right4");
var num1=0;
var num2=0;
var num3=0;
var num4=0;
aSection[0].style.display="block";
for(var i=0;i<aDiv.length;i++){
aDiv[i].index=i;
aDiv[i].onclick=function(){
for(var j=0;j<aDiv.length;j++){
aSection[j].style.display="none";
}
aSection[this.index].style.display="block";
}
}
oRight1.onclick=rua1;
function rua1(){
num1++;
for(var i=0;i<aPic1.length;i++){
aPic1[i].style.display="none";
}
if(num1==aPic1.length){
num1=0;
}
aPic1[num1].style.display="block";
}
oLeft1.onclick=function(){
num1--;
for(var i=0;i<aPic1.length;i++){
aPic1[i].style.display="none";
}
if(num1<0){
num1=aPic1.length-1;
}
aPic1[num1].style.display="block";
}
var timer1=setInterval(rua1,1500);
oAllPic1.onmouseover=function(){
clearInterval(timer1);
}
oAllPic1.onmouseout=function(){
timer1=setInterval(rua1,1500);
}
oRight2.onclick=rua2;
function rua2(){
num2++;
for(var i=0;i<aPic2.length;i++){
aPic2[i].style.display="none";
}
if(num2==aPic2.length){
num2=0;
}
aPic2[num2].style.display="block";
}
oLeft2.onclick=function(){
num2--;
for(var i=0;i<aPic2.length;i++){
aPic2[i].style.display="none";
}
if(num2<0){
num2=aPic2.length-1;
}
aPic2[num2].style.display="block";
}
var timer2=setInterval(rua2,1500);
oAllPic2.onmouseover=function(){
clearInterval(timer2);
}
oAllPic2.onmouseout=function(){
timer2=setInterval(rua2,1500);
}
oRight3.onclick=rua3;
function rua3(){
num3++;
for(var i=0;i<aPic3.length;i++){
aPic3[i].style.display="none";
}
if(num3==aPic3.length){
num3=0;
}
aPic3[num3].style.display="block";
}
oLeft3.onclick=function(){
num3--;
for(var i=0;i<aPic3.length;i++){
aPic3[i].style.display="none";
}
if(num3<0){
num3=aPic3.length-1;
}
aPic3[num3].style.display="block";
}
var timer3=setInterval(rua3,1500);
oAllPic3.onmouseover=function(){
clearInterval(timer3);
}
oAllPic3.onmouseout=function(){
timer3=setInterval(rua3,1500);
}
oRight4.onclick=rua4;
function rua4(){
num4++;
for(var i=0;i<aPic4.length;i++){
aPic4[i].style.display="none";
}
if(num4==aPic4.length){
num4=0;
}
aPic4[num4].style.display="block";
}
oLeft4.onclick=function(){
num4--;
for(var i=0;i<aPic4.length;i++){
aPic4[i].style.display="none";
}
if(num4<0){
num4=aPic4.length-1;
}
aPic4[num4].style.display="block";
}
var timer4=setInterval(rua4,1500);
oAllPic4.onmouseover=function(){
clearInterval(timer4);
}
oAllPic4.onmouseout=function(){
timer4=setInterval(rua4,1500);
}
}