js书写选项卡和轮播图的结合(这个写的不是很好)
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.οnlοad=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[i].οnclick=function(){
for(var j=0;j
}
aSection[this.index].style.display="block";
}
}
oRight1.οnclick=rua1;
function rua1(){
num1++;
for(var i=0;i
}
if(num1==aPic1.length){
num1=0;
}
aPic1[num1].style.display="block";
}
oLeft1.οnclick=function(){
num1--;
for(var i=0;i
}
if(num1<0){
num1=aPic1.length-1;
}
aPic1[num1].style.display="block";
}
var timer1=setInterval(rua1,1500);
oAllPic1.οnmοuseοver=function(){
clearInterval(timer1);
}
oAllPic1.οnmοuseοut=function(){
timer1=setInterval(rua1,1500);
}
oRight2.οnclick=rua2;
function rua2(){
num2++;
for(var i=0;i
}
if(num2==aPic2.length){
num2=0;
}
aPic2[num2].style.display="block";
}
oLeft2.οnclick=function(){
num2--;
for(var i=0;i
}
if(num2<0){
num2=aPic2.length-1;
}
aPic2[num2].style.display="block";
}
var timer2=setInterval(rua2,1500);
oAllPic2.οnmοuseοver=function(){
clearInterval(timer2);
}
oAllPic2.οnmοuseοut=function(){
timer2=setInterval(rua2,1500);
}
oRight3.οnclick=rua3;
function rua3(){
num3++;
for(var i=0;i
}
if(num3==aPic3.length){
num3=0;
}
aPic3[num3].style.display="block";
}
oLeft3.οnclick=function(){
num3--;
for(var i=0;i
}
if(num3<0){
num3=aPic3.length-1;
}
aPic3[num3].style.display="block";
}
var timer3=setInterval(rua3,1500);
oAllPic3.οnmοuseοver=function(){
clearInterval(timer3);
}
oAllPic3.οnmοuseοut=function(){
timer3=setInterval(rua3,1500);
}
oRight4.οnclick=rua4;
function rua4(){
num4++;
for(var i=0;i
}
if(num4==aPic4.length){
num4=0;
}
aPic4[num4].style.display="block";
}
oLeft4.οnclick=function(){
num4--;
for(var i=0;i
}
if(num4<0){
num4=aPic4.length-1;
}
aPic4[num4].style.display="block";
}
var timer4=setInterval(rua4,1500);
oAllPic4.οnmοuseοver=function(){
clearInterval(timer4);
}
oAllPic4.οnmοuseοut=function(){
timer4=setInterval(rua4,1500);
}
}