0

我正在为我父亲的公司设计一个布局，现在我需要在他们最近的合同之间制作一个滑块......旁边有他们专业知识的按钮等。如果你按下其中一个按钮，它应该滑动到列出他们的专业知识。

但是专业幻灯片效果不佳，我刚刚发现不应该显示的幻灯片就在文本的其余部分之后 混淆（当您刚刚打开页面时检查页脚下方）可以有人帮我吗？

<!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&ccedil;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  |  info@idis.be  |  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/ 在此先感谢

4

1 回答 1

1

我相信我已经找到了错误：p 这只是因为脚本找不到 CSS id（我认为这就是原因）。

于 2012-04-26T20:29:52.733 回答