-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