图片切换126全功能
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>514隋佳良</title>
<style type="text/css">
.inv{
width: 666px;
height: 585px;
display:none;}
.v{
width: 666px;
height: 585px;
display:block;}
.insi{border:none;
width:175px;
height:35px;}
.mydiv1{
float:left;
width:230px;
height:35px;}
.mydiv2{
width:80px;
height:25px;
padding-top:8px;
float:left}
.bk{
border:#CFCFCF solid 2px;
width:320px;
margin-top:50px;
margin-bottpm:10px;
height:40px;}
.thirty{
font-size:12px;
float:left;
width:200px;
color:#CFCFCF;}
.forgetpassword{
width:80px;
float:left;
color:#65AB68;
margin-top:5px;
margin-bottom:50px;
font-size:12px;}
.backgrd{
width:403px;
height:536px;
padding-left:80px;
padding-top:50px;
float:left;
background-color:#FFFFFF;}
.row{
float:left;
width:300px;}
.headl{
padding-left:110px;
width:330px;
padding-bottom:30px;
font-size:24px;
height:30px;}
.submi{
width:320px;
font-size:18px;
color:#FFFFFF;
background:#40B042;
height:42px;}
#begin{
width:100%;
height:71px;
}
#begin-l{
width:390px;
height:71px;
padding-left:50px;
float:left;
}
#beg-l-image{
width:185px;
height:71px;
float:left;
margin-right:30px;
}
#beg-l-text{
width:150px;
height:51px;
padding-top:13px;
float:left;}
#beg-l-t-p{
width:150px;
padding-top:13px;
margin:0px;
color:#B0B0B0;
padding-left:10px;
height:31px;
border-left:#C5BDBE 2px solid;
}
#begin-r{width:490px;
height:71px;
margin-left:562px;
padding-top:0px;
float:left;
}
#divo{
padding-left:10px;
height:51px;
width:480px;}
.b-r-p{
width:260px;
height:20px;
padding-left:10px;
border-right:#C5BDBE 2px solid;
float:left;
}
.b-r-pp{
width:200px;
height:20px;
padding-left:5px;
float:left;
}
a{
padding-left:5px;
width:60px;
color:#ACACAC;
float:left;
height:20px;
font-size:10px;
}
.aa{
padding-left:5px;
width:75px;
color:#ACACAC;
float:left;
height:20px;
font-size:10px;
border-right:#929292 2px solid;
}
#core{
width:100%;
height:650px;
padding-top:50px;
background-color:#9919E4;}
#divc{
width:1150px;
height:580px;
margin-left:150px;
}
#div-l{
width:665px;
height:586px;
float:left;}
#endinf{
width:100%;
height:100px;
}
#end{
width:500px;
height:50px;
margin-left:450px;
padding-left:20px;
margin-top:100px;}
.ljlj{
position:absolute;
left:460PX;
top:670px}
.lj{
background:#FFCD21;
width:120px;
height:40px;
border-radius:16px;
font-size:20px; }
.ll{
background:#979797;
color:#FFFFFF;
border-radius:50px;}
.llj{
position:absolute;
left:690PX;
top:680px}
.l{width:100px;}
.ni{
width:100px;
font-size:15px;
color:#56A250;
margin-top:10px;
margin-right:50px;}
.nii{
width:100px;
margin-top:10px;
font-size:15px;
color:#56A250;
margin-left:50px;}
.exter{
width:1000px;
}
.exters{
width:1000px;
margin-left:200px;
}
.repair{float:left;}
</style>
</head>
<body>
<div id="begin">
<div id="begin-l">
<div id="beg-l-image">
<img src="126.png">
</div>
<div id="beg-l-text">
<p id="beg-l-t-p">你的专业电子邮局</p>
</div>
</div>
<div id="begin-r">
<div id="divo">
<p class="b-r-p">
<a href="#">VIP</a>
<a href="#">会员</a>
<a href="#">企业邮箱</a>
<a href="#">海外登录</a>
<p>
<p class="b-r-pp">
<a>帮助</a>
<a>反馈</a>
<a>修复公示</a>
</p>
</div>
</div>
</div>
<div id="core">
<div id="divc">
<div id="div-l">
<img src="22.png" class="v" id="a">
<img src="2.jpg" class="inv" id="b">
<img src="3.jpg" class="inv" id="c">
<img src="4.jpg" class="inv" id="d">
</div>
<div class="ljlj"><input class="lj" type="submit" value="立即了解"></div>
<div class="llj">
<button class="ll" onClick="up();" id="b1">上一张</button>
<button class="ll" onClick="down();" id="b2">下一张</button>
</div>
<div class="backgrd">
<form action="" method="">
<div class="headl">邮箱账号登陆</div>
<div class="bk">
<div class="mydiv1">
<div class="repair"><img src="111.PNG"></div>
<div class="repair"><input type="text" class="insi" placeholder="邮箱账号或手机号码"></div>
</div>
<div class="mydiv2">
@126.com
</div>
</div>
<div class="bk">
<div class="mydiv1">
<div class="repair"><img src="112.PNG"></div>
<div class="repair"><input type="password" class="insi" placeholder="输入密码"></div>
</div>
</div>
<div class="row">
<div class="thirty"><input type="checkbox">30天内免登陆</div>
<div class="forgetpassword">忘记密码</div>
</div>
<div><input type="submit" class="submi" value="登 录">
</div>
<div>
<a class="ni" href="#">注册网易邮箱</a>
<a class="nii" href="#">邮箱官方App</a>
</div>
</form>
</div>
</div>
</div>
<div id="ending">
<div id="end">
<a class="aa" href="#">网易首页</a>
<a class="aa" href="#">网易严选</a>
<a class="aa" href="#">政府公益热线</a>
<a class="aa" href="#">隐私政策</a>
<a class="l" href="#">儿童隐私政策</a>
</div>
<div class="exter"><a class="exters">网易公司版权所有©1997-2022 ICP备案 粤B2-20090191-13 公安 粤公网安备 44010602000311增值电信业务许可证 粤B2-20090191 B2-20090058 (数据来源:艾媒邮箱报告)</a></div>
</div>
</body>
</html>
<script type="text/javascript">
var num=1;
var a=document.getElementById("a");
var b=document.getElementById("b");
var c=document.getElementById("c");
var d=document.getElementById("d");
function down()
{ num++;
if(num>4)num=1;
if(num==1)
{
a.style.display="block";
b.style.display="none";
c.style.display="none";
d.style.display="none";
}
if(num==2)
{
a.style.display="none";
b.style.display="block";
c.style.display="none";
d.style.display="none";
}
if(num==3)
{
a.style.display="none";
b.style.display="none";
c.style.display="block";
d.style.display="none";
}
if(num==4)
{
a.style.display="none";
b.style.display="none";
c.style.display="none";
d.style.display="block";
}
}
function up()
{ num--;
if(num<1)num=4;
if(num==1)
{
a.style.display="block";
b.style.display="none";
c.style.display="none";
d.style.display="none";
}
if(num==2)
{
a.style.display="none";
b.style.display="block";
c.style.display="none";
d.style.display="none";
}
if(num==3)
{
a.style.display="none";
b.style.display="none";
c.style.display="block";
d.style.display="none";
}
if(num==4)
{
a.style.display="none";
b.style.display="none";
c.style.display="none";
d.style.display="block";
}
}
setInterval("down()",3000);
</script>