126全部及图片切换
2024-06-30 02:11:38
图片切换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>126全部及图片切换相关推荐
- 126.如何使用CSS和 JS 创建简单图片切换
效果 (源码网盘地址在最后) 视频演示 视频地址:https://www.ixigua.com/6914222592170263053/ 源码 index.html <!DOCTYPE html ...
- html图片轮播怎么写,用js和CSS写图片切换效果（轮播图）
用js和CSS写图片切换效果(轮播图). ** 学习前提** 了解CSS伪类元素,css3过度效果 对js拥有基础的了解. 清楚图片切换原理. CSS3轮播图 body{ background:#cc ...
- 分享126个JS图片代码，总有一款适合您
分享126个JS图片代码,总有一款适合您 126个JS图片代码下载链接:https://pan.baidu.com/s/1tLDf9ukWCBOQU-Z2o7ofLA?pwd=3of5 提取码:3o ...
- Ajax无刷新实现图片切换特效
1.页面cs代码 using System; using System.Data; using System.Configuration; using System.Web; using System ...
- android 定时换图片,android 视频和图片切换并进行自动轮播
刚入android没多久,遇到的比较郁闷的问题就是子线程主线程的问题,更改UI界面,本想做一个图片的轮播但是比较简单,然后就试试实现视频跟图片切换播放进行不停的循环播放.也用过不少控件,但是知其然不知 ...
- 手机触屏滑动图片切换插件swiper.js
今天给大家分享一款手机触屏滑动图片切换插件swiper.js是一款swiper手机触屏滑动图片幻灯片,适合各种尺寸.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- javascript 实现图片切换，考虑平稳退化与行为结构分离
最近在学习JavaScript DOM编程艺术,跟着学习把里面的一个demo 敲了,demo 是小玩意,但是在编程习惯上给了我很大的启发. 考虑"平稳退化":如果浏览器不支持或者禁 ...
- 精致3D图片切换效果，最适合企业产品展示
这是一个精致的立体图片切换效果,特别适合企业产品展示,可立即用于实际项目中.支持导航和自动播放功能, 基于 CSS3 实现,推荐使用最新的 Chrome,Firefox 和 Safari 浏览器浏览效 ...
- Delphi 使用双缓冲解决图片切换时的闪烁问题 good
Delphi 使用双缓冲解决图片切换时的闪烁问题 good 参考文章: (1)Delphi 使用双缓冲解决图片切换时的闪烁问题 good (2)https://www.cnblogs.com/find ...
最新文章
- 开源！开源！我写的Anto.exe C#代码自动生成工具.欢迎下载。。
- Node核心模块Buffer
- redux学习笔记归纳
- Mysql分析-profile详解
- Linux卸载MariaDB
- pip修改下载源为国内源 linux系统
- IE6,IE7下按钮(BUTTON)变宽
- android之WIFI小车编程详述
- CCFA中国国际零售创新大会，观远数据用智能分析驱动零售决策
- Java新职篇：编译程序（2）
- 27.Linux/Unix 系统编程手册(上) -- 程序的执行
- scapy爬虫-Url去重
- Web版SSH客戶端Sshwifty
- 双网卡服务器实现内外网访问
- 学生成绩预测模型_学生成绩分析预测
- Google NIK插件的介绍及使用
- 提高教育效率：教师如何制作智能学生成绩在线查询系统？
- 圆透视变换为椭圆，其缩放比例如何求？
- 100部优秀英文小说
- 语录集人生---投资