-2
我知道是一个新手的问题，但我真的需要一个工作解决方案。我想要实现背景图片幻灯片，但这次，登录窗体将保持静态，而背景图片在背后滑动。我已经实现了使用CSS和jQuery的滑动效果，但出于某种原因，我的登录名拒绝显示。 Twitter主页正是我所需要的。登录表单在背景图像滑动时保持不变。背景图片幻灯片与登录表单静态而背景图片幻灯片
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>login or singup</title>
<link rel="shortcut icon" href="images/favicon.png" type="image/png" />
<script type="text/javascript" src="scripts/jquery-2.1.4.js"></script>
<script type="text/javascript" src="scripts/jquery.cycle.all.js"></script>
<script type="text/javascript" src="scripts/script.js"></script>
<link rel="stylesheet" href="css/styles.css" type="text/css"/>
</head>
<body>
<div id="hero">
<div id="form">
<form action="" method="">
<input type="text" name="email" id="email" value="" autocomplete="off"/>
<input type="password" name="paswd" id="paswd" value="" />
<input type="submit" value="submit">
</form>
</div><!--end of from div-->
<div id = "slider">
<img src="images/cristiano-ronaldo-real.jpg">
<img src="images/fcb-lionel-messi.jpg" >
<img src="images/franck-ribery-wallpaper.jpg">
<img src="images/man-utd-wayne-rooney.jpg">
<img src="images/zlatan-ibrahimovic-wallpaper-psg.jpg">
</div><!--end of slider-->
</div><!--end of hero-->
</body>
</html>
css
@charset "utf-8";
/* CSS Document */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family : 'open sans';
}
#slider{
width: 1390px;
height: 1080px;
position: absolute;
overflow:hidden;
}
#form {
position: absolute;
width: 302px;
height: 120px;
z-index: 1;
right: 20px;
top: 90px;
border-radius: 25px;
background-color:#D4D4D4;
background-position: left top;
background-repeat: repeat;
}
js
// JavaScript Document
$('#slider').cycle({
fx: 'scrollHorz',
});
如果可能的话，添加一个jsfiddle – Dave