0
我正在为我父亲公司的布局工作，现在我需要在他们最近的合同之间制作一个滑块......并且在它旁边还有一些按钮以及他们的专业知识等。如果按下一个它的按钮应该滑动到列表与他们的专业知识。css和jquery问题
但是，专业知识幻灯片将无法正常工作，我刚刚发现不应显示的幻灯片仅位于文本其余部分的后面混淆（当您刚刚打开时，请在页脚下查看）页面） 任何人都可以帮助我吗？
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>IDIS | International Development Innovation Service</title>
<link href="css.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var step = 1;
var slide = "";
var interval;
$(document).ready(function(){
interval = setInterval("change()", 5000);
});
/*if(slide !== "")
{
$("#" + slide).mouseleave(function(){
$("#" + step).slideDown("slow");
$("#" + slide).slideUp("slow");
interval = setInterval("change()", 15000);
});
}*/
expertise = function()
{
clearInterval(interval);
$("#4").slideDown("slow");
$("#" + step).slideUp("slow");
slide = "4";
};
change = function()
{
var oldstep = step;
step++;
if(step === 4)
{
step = 1;
}
$("#" + step).slideDown("slow");
$("#" + oldstep).slideUp("slow");
};
</script>
</head>
<body>
<div class="content">
<!-- HEADER -->
<div class="textchoice"><a href="#">Français</a> - <a href="#">English</a></div>
<div class="headertekst">
<div class="logo"></div>
<div id="slogan">Challenging Changes</div>
<div id="name">International Development Innovation Services</div>
</div>
<!-- MENU BAR-->
<div class="bar">
<div class="menubar">
<ul>
<li><a href="#" onclick="expertise()">EXPERTISE</a></li>
<li><a href="#">GEOGRAPHIC AREAS</a></li>
<li><a href="#">VIEW ALL</a></li>
</ul>
</div>
<!-- SLIDER 1 -->
<div class="slider" id="1">
<div class="img">
<img src="images/Tawaz (1).jpg" width="85" height="64"/><br />
2012
</div>
<div class="contractstekst" id="1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada arcu laoreet est luctus luctus. Proin pharetra ullamcorper ullamcorper. Sed pretium interdum massa vitae eleifend. Integer tincidunt bibendum convallis. Ut.
</div>
<div class="title">
CONTRACTS
</div>
</div>
<!-- SLIDER 2 -->
<div class="slider" id="2">
<div class="img">
<img src="images/Tawaz (1).jpg" width="85" height="64"/><br />
2011
</div>
<div class="contractstekst">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada arcu laoreet est luctus luctus. Proin pharetra ullamcorper ullamcorper. Sed pretium interdum massa vitae eleifend. Integer tincidunt bibendum convallis. Ut.
</div>
<div class="title">
CONTRACTS
</div>
</div>
<!-- SLIDER 3 -->
<div class="slider" id="3">
<div class="img">
<img src="images/Tawaz (1).jpg" width="85" height="64"/><br />
2010
</div>
<div class="contractstekst">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada arcu laoreet est luctus luctus. Proin pharetra ullamcorper ullamcorper. Sed pretium interdum massa vitae eleifend. Integer tincidunt bibendum convallis. Ut.
</div>
<div class="title">
CONTRACTS
</div>
</div>
<!-- EXPERTISE -->
<div class="img">
<img src="images/Tawaz (1).jpg" width="85" height="64"/><br />
2010
</div>
<div class="contractstekst">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed malesuada arcu laoreet est luctus luctus. Proin pharetra ullamcorper ullamcorper. Sed pretium interdum massa vitae eleifend. Integer tincidunt bibendum convallis. Ut.
</div>
<div class="title">
EXPERTISE
</div>
</div>
<!-- HIER BEGINT DE TEKST IN HET WITTE VAK -->
<div class="witvak">
<div class="witvakmenu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">PEOPLE</a></li>
<li><a href="#">PARTNERS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
<!-- HIER KOMT DE CONTENT -->
<div class="witvakcontent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut at sapien arcu, condimentum pulvinar elit. Suspendisse sed lacus at sapien sollicitudin vulputate. Phasellus sem nunc, venenatis at egestas nec, egestas vitae nisi. Etiam eu ante mauris, sed vulputate felis. Duis euismod eros in tortor gravida ut scelerisque ante condimentum. Vivamus id orci quis elit convallis tempor. Suspendisse elit nulla, posuere vel ullamcorper vel, accumsan a sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam vestibulum, elit quis feugiat posuere, sem urna laoreet nisi, rutrum fermentum leo nunc a ligula. Curabitur tristique neque nec arcu pulvinar aliquet. Sed non commodo metus. Phasellus fermentum vestibulum interdum. Donec id nulla elit, at pharetra lacus. Proin ac neque quis velit commodo venenatis sed quis nunc. Sed nec diam augue. Duis at lectus nunc.
</div>
</div>
<!-- DE FOOTER-->
<div class="footer">
Krombrakenstraat 19 B-2460 Kasterlee Belgium | [email protected] | tel.: (+32) 478/644 609
</div>
</div>
</body>
</html>
和CSS
body {
background-color:#eef6e9;
background-image:url('images/background.png');
background-position:center top;
background-repeat: no-repeat;
}
.content {
width: 1240px;
margin: 0px auto;
}
a {
text-decoration: none;
}
a:link {
color:#000000;
}
a:hover {
color:#82c225;
}
a:visited {
color:#000000;
}
/* HEADER */
.headertekst {
font-family: bimini;
width: 1240px;
margin: 0px auto;
}
#slogan {
display: inline-block;
margin-left: 377px;
margin-top: 10px;
font-size: 44px;
}
#name {
display: inline-block;
margin-top: 7px;
margin-left: 270px;
font-size: 25px;
}
.textchoice {
font-family: Trebuchet MS;
margin-top: 3px;
margin-right: 164px;
float:right;
}
.logo {
margin-top: 9px;
margin-left: 188px;
background-image:url('images/logo.png');
width: 158px;
height: 145px;
float: left;
}
/*CONTRACTS BAR*/
.bar {
width: 1002px;
height: 124px;
margin: 18px 124px 0px 124px;
float: left;
background-image:url('images/contracts_bar.png');
background-repeat:y-repeat;
}
.menubar {
float: left;
width: 270px;
height: 124px;
font-family: bimini;
text-align: right;
color: white;
margin-left: -50px;
margin-top: -17px;
font-size: 21px;
line-height: 40px;
}
.menubar ul {
list-style-type: none;
}
.menubar a {
text-decoration: none;
}
.menubar a:link {
color:#FFFFFF;
}
.menubar a:hover {
color:#82c225;
}
.menubar a:visited {
color:#FFFFFF;
}
.slider {
float: left;
height: 124px;
width: 675px;
margin-left: 64px;
}
/* IDS VAN SLIDERS */
#2 {
display:none;
}
#3 {
display:none;
}
#4 {
display:none;
}
.img {
float: left;
margin-top: 21px;
height: 124px;
width: 89px;
text-align:right;
font-family: bimini;
color:white;
font-size: 21px;
}
.img img{
border-style: solid;
border-color: white;
border-width: 2px;
}
.contractstekst {
color: white;
float: left;
font-family: Trebuchet MS;
font-size: 13px;
margin-left: 31px;
margin-top: 15px;
width: 400px;
height: 100px;
}
.title {
color: white;
float: left;
font-family: bimini;
font-size: 29px;
margin-left: 20px;
margin-top: 23px;
text-align: right;
width: 40px;
}
/*WITVAK*/
.witvak {
width: 1002px;
background-color:#FFFFFF;
float: left;
margin-left: 124px;
}
.witvakmenu {
width: 220px;
float: left;
text-align: right;
font-family: bimini;
font-color: black;
font-size: 21px;
line-height: 40px;
}
.witvakmenu ul {
list-style-type: none;
}
.witvakmenu a {
text-decoration: none;
}
.witvakmenu a:link {
color:#000000;
}
.witvakmenu a:hover {
color:#82c225;
}
.witvakmenu a:visited {
color:#000000;
}
.witvakcontent {
font-family: Trebuchet MS;
margin-top: 27px;
font-size: 15px;
float: left;
width: 675px;
margin-left: 64px;
padding-bottom: 20px;
}
/*FOOTER*/
.footer {
background-color:#0c651a;
text-align: center;
font-family: Trebuchet MS;
width: 1002px;
height: 24px;
margin-left: 124px;
color: white;
font-size: 14px;
float: left;
}
这里有一个演示： http://legendofthesamurai.gamecoll.com/idis/ 预先感谢
你有两个'id =“1”'元素可能会导致不需要的行为 – andyb 2012-04-26 20:33:11