Question

我知道这是一个新手问题，但我真的需要一个有效的解决方案。我想要获得背景图片幻灯片，但这一次，登录表单将保持静态，而背景图像在其后面滑动。我已经使用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',


});

背景图像幻灯片与登录窗体静态，而背景图像幻灯片

0 个答案: