这是我的页面代码，其中包含用于登录和注册下拉菜单的js。在页面中心添加滑块，开始在页面加载时播放。
但在添加滑块登录和注册部分之前工作正常，但现在有点击不起作用。当我删除滑块fom这个页面它的工作，但滑块它没有。任何人都可以帮助我保持这些功能的全部功能吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="jquery, css3, 3d, webkit, fallback, slider, css3, 3d transforms, slices, rotate, box, automatic" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/slicebox.css" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
<script type="text/javascript" src="js/modernizr.custom.46884.js"> </script>
<link rel="stylesheet" href="css/style.css">
<script src="js/index.js"></script>
<script type="text/javascript">
function click1(){
document.getElementById("navPlay").click();
}
$('input[type="submit"]').mousedown(function(){
$(this).css('background', '#2ecc71');
});
$('input[type="submit"]').mouseup(function(){
$(this).css('background', '#1abc9c');
});
$('#loginform').click(function(){
$('.login').fadeToggle('slow');
$(this).toggleClass('green');
});
$(document).mouseup(function (e)
{
var container = $(".login");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.hide();
$('#loginform').removeClass('green');
}
});
$('#registration').click(function(){
$('.register').fadeToggle('slow');
$(this).toggleClass('green');
});
$(document).mouseup(function (e)
{
var container = $(".register");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.hide();
$('#registration').removeClass('green');
}
});
</script>
<Style>
body{
background-image:url("./images/bgimg.jpg");
}
#h21{
float:left;
padding : 20px;
color: #ecf0f1;
margin-left:80px;
font-size: 30px;
}
#h22 {
padding: 20px;
color: #ecf0f1;
margin-left:500px;
}
footer {
text-align: center;
padding: 50px ;
margin-top:50px;
background-color: #34495e;
margin-bottom:-550px;
}
footer p {
color: #f8f8f8;
}
h4 {
color : #ecf0f1;
text-align: center;
padding: 20px 0px 20px;
margin-top:399px;
}
</style
</head>
<body onload="click1()"s>
<div id="wrap">
<div id="regbar">
<div id="navthing">
<h2 id ="h21">Pictoria </h2>
<h2 id ="h22"><a href="#" id="loginform">Login</a> | <a href="#" id="registration">Register</a></h2>
<div class="login">
<div class="arrow-up"></div>
<div class="formholder">
<div class="randompad">
<fieldset>
<label name="email">Email</label>
<input type="email" PlaceHolder="example@example.com" />
<label name="password" >Password</label>
<input type="password" PlaceHolder="*******"/>
<input type="submit" value="Login" />
</fieldset>
</div>
</div>
</div>
</div>
<div class="register">
<div class="arrow-up1"></div>
<div class="formholder1">
<div class="randompad">
<fieldset>
<label name="displayname">Display name</label>
<input type="text" PlaceHolder="Display name" />
<label name="username">Username</label>
<input type="text" PlaceHolder="Username" />
<label name="password" >Password</label>
<input type="password" PlaceHolder="*******" />
<label name="email">Email</label>
<input type="email" PlaceHolder="example@example.com" />
<label name="bio" >Bio</label>
<input type="text" PlaceHolder="About you!" />
<input type="submit" value="Register" />
</fieldset>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="wrapper">
<ul id="sb-slider" class="sb-slider">
<li>
<img src="images/1.jpg" alt="image1"/>
<div class="sb-description">
<h3>Creative Lifesaver</h3>
</div>
</li>
<li>
<img src="images/2.jpg" alt="image2"/>
<div class="sb-description">
<h3>Honest Entertainer</h3>
</div>
</li>
<li>
<img src="images/3.jpg" alt="image1"/>
<div class="sb-description">
<h3>Brave Astronaut</h3>
</div>
</li>
<li>
<img src="images/4.jpg" alt="image1"/>
<div class="sb-description">
<h3>Affectionate Decision Maker</h3>
</div>
</li>
<li>
<img src="images/5.jpg" alt="image1"/>
<div class="sb-description">
<h3>Faithful Investor</h3>
</div>
</li>
<li>
<img src="images/6.jpg" alt="image1"/>
<div class="sb-description">
<h3>Groundbreaking Artist</h3>
</div>
</li>
<li>
<img src="images/7.jpg" alt="image1"/>
<div class="sb-description">
<h3>Selfless Philantropist</h3>
</div>
</li>
</ul>
<div id="shadow" class="shadow"></div>
<div id="nav-arrows" class="nav-arrows">
<a href="#">Next</a>
<a href="#">Previous</a>
</div>
<div id="nav-options" class="nav-options" Style=" display:hidden;">
<span id="navPlay">Play</span>
<script>
document.getElementById('navPlay').style.visibility = 'hidden';
</script>
</div>
</div><!-- /wrapper -->
</div >
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script type="text/javascript" src="js/jquery.slicebox.js"></script>
<script type="text/javascript">
$(function() {
var Page = (function() {
var $navArrows = $( '#nav-arrows' ).hide(),
$navOptions = $( '#nav-options' ).hide(),
$shadow = $( '#shadow' ).hide(),
slicebox = $( '#sb-slider' ).slicebox( {
onReady : function() {
$navArrows.show();
$navOptions.show();
$shadow.show();
},
orientation : 'h',
cuboidsCount : 3
} ),
init = function() {
initEvents();
},
initEvents = function() {
// add navigation events
$navArrows.children( ':first' ).on( 'click', function() {
slicebox.next();
return false;
} );
$navArrows.children( ':last' ).on( 'click', function() {
slicebox.previous();
return false;
} );
$( '#navPlay' ).on( 'click', function() {
slicebox.play();
return false;
} );
};
return { init : init };
})();
Page.init();
});
</script>
<footer>
<p> ©Copyright 2016 Pictoria`enter code here` | All rights reserved. </p>
</footer>
</body>
</html>
答案 0 :(得分：0)
我们错过了一些CSS信息。但是，它可能是一个z指数问题。确保滑块框不在注册/登录按钮上。
答案 1 :(得分：0)
在 body 标记结尾之前放置 javascript 代码和 .js 文件链接后尝试。