62,270
社区成员
发帖
与我相关
我的任务
分享本人小菜鸟，使用overflow:hidden，为什么左边的内容没了，右边的内容还有呢？
我想做一个登陆界面，界面须有这些功能：
（1）每次在页面上显示一张图片，3秒之后自动切换，除非我鼠标移在了图片上。功能很正常，设置overflow:hidden后，页面左边的前一张图片一部分没了， 但是页面上右边还附带了另外一张图片的一部分，怎么把右边图片的一部分也消除掉呢？请大神看截图：
（2）每次点击换一张验证码时，都会引起用户名，密码，验证码的整个div发生抖动变化，这个怎么消除呢？
下面是我的登录界面源代码：
我所有的分加起来只有120分
，万分感谢能得到一个完美的答案，拜谢！
（1）每次在页面上显示一张图片，3秒之后自动切换，除非我鼠标移在了图片上。功能很正常，设置overflow:hidden后，页面左边的前一张图片一部分没了， 但是页面上右边还附带了另外一张图片的一部分，怎么把右边图片的一部分也消除掉呢？请大神看截图：
（2）每次点击换一张验证码时，都会引起用户名，密码，验证码的整个div发生抖动变化，这个怎么消除呢？
下面是我的登录界面源代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login" MaintainScrollPositionOnPostback="true" %>
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<!--<![endif]-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>江中药谷碳排放系统 - 登录界面</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="JS/jquery-3.1.0.min.js"></script>
<link href="bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="bootstrap-3.3.5-dist/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<script src="bootstrap-3.3.5-dist/js/npm.js"></script>
<style type="text/css">
#warning {
font-family: 微软雅黑,宋体;
font-size: 12px;
color: red;
}
/*.code, #user_name, user_pwd {
font-size:15px;
}*/
#div_outer{
margin:10px auto;
width:6400px;
background-image:url(./IMG/login/loading.gif);
background-repeat:no-repeat;
overflow:hidden;
}
#div_innerMove {
position:relative;
}
#div_innerMove img {
margin:0px;
float:left;
}
.login {
width:240px;
background-color:#95c3ee;
border:1px solid #f2e6e6;
padding:6px 6px 6px 6px;
position:fixed;
top:580px;
right:300px;
}
#btn_left, #btn_right {
width:30px;
height:30px;
background-image:url(./IMG/login/back_btn_1.jpg);
border:1px solid #999;
border-radius:8px;
float:left;
}
#btn_right {
background-position:30px 0px;
margin:0px 0px 0px 1220px;
}
#div_controls {
position:relative;
top:-345px;
}
#Submit, #Reset {
border-radius:6px;
}
</style>
<script type="text/javascript">
function veritySubmit() {
var uname = document.getElementById("user_name").value;
if (uname == null || uname == "") {
document.getElementById("warning").textContent = "用户名不能为空！";
return false;
}
var upwd = document.getElementById("user_pwd").value;
if (upwd == null || upwd == "") {
document.getElementById("warning").textContent = "密码不能为空！";
return false;
}
var userPattern = /[A-Za-z0-9]{4,20}/;
var flag = userPattern.test(uname);
if (flag == false) {
document.getElementById("warning").textContent = "用户名只能由英文大小写字母组成！";
return false;
}
var pwdPattern = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,.\/]).{8,18}$/;
flag = pwdPattern.test(upwd);
if (flag == false) {
document.getElementById("warning").textContent = "密码必须由8-16位字母、数字、特殊符号线组成.！";
return false;
}
return true;
}
function Reset() {
document.getElementById("warning").textContent = "";
}
var img_now = 0;
var img_count = 5;
var img_every_width = 1280;
var t = setInterval("$('#btn_right').click()", 3000);
$(document).ready(function () {
$("#btn_left").click(function () {
img_now = (img_now + img_count - 1) % img_count;
moveto(img_now);
});
$("#btn_right").click(function () {
img_now = (img_now + 1) % img_count;
moveto(img_now);
});
$("#div_outer").mouseenter(function () {
$("#div_controls").fadeIn();
clearInterval(t);
});
$("#div_outer").mouseleave(function () {
$("#div_controls").fadeOut();
t = setInterval("$('#btn_right').click()", 3000);
});
});
function moveto(i) {
var _left = -(i * img_every_width);
$("#div_innerMove").animate({ "opacity": 0.6 }, 200);
$("#div_innerMove").animate({ "left": _left });
$("#div_innerMove").animate({ "opacity": 1 }, 200);
}
</script>
</head>
<body>
<form id="form1" runat="server" defaultbutton="Submit" defaultfocus="user_name">
<div class="container">
<h1><strong>保密一下哈~</strong></h1>
<hr />
<div class="img_login">
<div id="div_outer">
<div id="div_innerMove" runat="server">
<asp:Image ID="Image1" runat="server" ImageUrl="~/IMG/login/3000亩生态的江中药谷.jpg" />
<asp:Image ID="Image2" runat="server" ImageUrl="~/IMG/login/江中药谷培训接待中心.jpg" />
<asp:Image ID="Image3" runat="server" ImageUrl="~/IMG/login/镌刻68位中医药名家的药谷大门.jpg" />
<asp:Image ID="Image4" runat="server" ImageUrl="~/IMG/login/中药固体制剂生产线.jpg" />
<asp:Image ID="Image5" runat="server" ImageUrl="~/IMG/login/自然生态的江中药谷.jpg" />
</div>
<div id="div_controls">
<input id="btn_left" type="button" value="" />
<input id="btn_right" type="button" value="" />
<p style="clear:both"></p>
</div>
</div>
</div>
<div class="login">
用户名：<asp:TextBox ID="user_name" runat="server" Width="170px" Height="20px"></asp:TextBox>
<br />
<br />
密 码：<asp:TextBox ID="user_pwd" runat="server" TextMode="Password" Width="170px"
Height="20px"></asp:TextBox>
<br />
<br />
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div class="login_code">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
验证码：<asp:TextBox ID="code" runat="server" Width="45px" Height="20px"></asp:TextBox>
<asp:ImageButton ID="vcImage" runat="server" AlternateText="图片验证码"
ImageUrl="~/CreateCode.aspx" Style="vertical-align: middle" />
<asp:LinkButton runat="server" ID="refreshCode" OnClick="refreshCode_Click">
<span id="exchange" style="font-family:Verdana, Gabriola">换一张</span></asp:LinkButton>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="refreshCode" />
</Triggers>
</asp:UpdatePanel>
</div>
<asp:Label ID="warning" runat="server" Text=""></asp:Label>
<br />
<asp:Button ID="Submit" runat="server" Text="登录" OnClick="Submit_Click" OnClientClick="return veritySubmit()" />
<input id="Reset" type="reset" value="重置" onclick="Reset()" />
</div>
</div>
</form>
</body>
</html>
我所有的分加起来只有120分
，万分感谢能得到一个完美的答案，拜谢！
...全文
请发表友善的回复…
发表回复
Sanlence 2016-08-11
- 打赏
- 举报
3ks！明白了
云上人间钦自赏 2016-08-11
- 打赏
- 举报
找个jq的图片轮播插件就行了，给你个网址，应该能找到你想要的效果，哪里不合适调整一下样式和图片就好了，不用谢。
http://sc.chinaz.com/jiaobendemo.aspx?downloadid=1201691738542
viphz615 2016-08-11
- 打赏
- 举报
*{
margin:0px;
padding:0px;
}
大吉大利_LiKe 2016-08-09
- 打赏
- 举报
js的refreshCode_Click方法都没有，点击a标签的时候没有return false，肯定会href当前地址，刷新页面肯定会发生抖动。
Poopaye 2016-08-09
- 打赏
- 举报
你不是有2层吗？
外面那层设置图片宽度，里面那层设置总宽度和位置
类似这样
#outter
{
width: 1000px;
overflow: hidden;
}
#inner
{
width: 6000px;
left: 700px;
position: relative;
}
yzf86211861 2016-08-09
- 打赏
- 举报
找找下 JQ 的插件吧 网上很多。
Hello World, 2016-08-09
- 打赏
- 举报
div_outer应该是一张图片的大小，div_innerMove才是所有图片加起来的大小，滚动时移动div_innerMove就可以了
Sanlence 2016-08-09
- 打赏
- 举报
我只要每次显示一张图片就可以。[/quote]
overflow:hidden意思是超出容器大小的才会隐藏，那你这个容器有多大明白不？[/quote]
现在明白你的意思了，谢谢！那我这样实现有什么解决办法吗？把宽度缩小到1200px就所有图片垂直了。我想靠水平位移来水平移动所以设置的6400px，怎么使得隐藏右边多出来的一部分呢？
我不是非得这么实现，本人太菜，想多学点东西怎么隐藏。
Poopaye 2016-08-08
- 打赏
- 举报
我只要每次显示一张图片就可以。[/quote]
overflow:hidden意思是超出容器大小的才会隐藏，那你这个容器有多大明白不？
Sanlence 2016-08-08
- 打赏
- 举报
我只要每次显示一张图片就可以。
Sanlence 2016-08-08
- 打赏
- 举报
也是没有用哦
qiuhong2992 2016-08-07
- 打赏
- 举报
原来如此，同学习
Sanlence 2016-08-07
- 打赏
- 举报
没明白你的意思。。。
Sanlence 2016-08-07
- 打赏
- 举报
跟这个没有关系，我放了五张图片，每张1200px，切换时切换到下一张了，关键在于怎么不是只是显示一张图片
Sanlence 2016-08-07
- 打赏
- 举报
我放了五张图片在上面，每张图片1200px，我做的是图片切换时切换到下一张，关键点在于怎么页面上不是只显示一张图片的
Poopaye 2016-08-07
- 打赏
- 举报
搞不懂你到底要不要右边的图片？
Poopaye 2016-08-05
- 打赏
- 举报
width:6400px;
这么宽。。
你想显示的图片有多宽就设置成多宽
秋的红果实 2016-08-05
- 打赏
- 举报
将图片放到一个单独的div，
<div style="overflow:hidden; width:500px; height:300px;">
<img src="图片.jpg" />
</div>
跳动de指尖 2016-08-05
- 打赏
- 举报
使用overflow hidden 那么超出的不会显示并且隐藏 没有滚动条
