JQuery滑塊實現問題

我一直在嘗試在JQuery中的滑塊實現。我被困在一個地方。這是我的代碼到目前爲止。JQuery滑塊實現問題

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Experimentation</title> 
    <style type="text/css"> 

#container { 
overflow:hidden; 
height: 200px; 
margin: 0 auto; 
width: 800px; 
background-color: white; 
} 


.box1, .box2, .box3, .box4, .box5 { 
    width: 200px; 
    height: 200px; 
    background-color: gray; 
    z-index: 10000; 
    position: relative; 
    float: left; 
    overflow:hidden; 
    } 


.information1, .information2, .information3, .information4, .information5 { 
    position: absolute; 
    width: 200px; 
    height:200px; 
    background-color: black; 
    opacity: 0.2; 
    top: 150px; 
    color: #FFF; 
} 

.information1 h3, .information2 h3,.information3 h3, .information4 h3, .information5 h3 { 
margin: 3px 3px; 
text-align: center; 
} 

.leftbutton img { 
cursor:pointer; 
} 

.rightbutton img { 
cursor:pointer; 
} 

    </style> 
    <script type="text/javascript" src="jquery-1.4.js"></script> 
    <script type="text/javascript"> 
     var topInitial = "0"; 
     var topAfter = "150px"; 

     $(function() { 

     $(".box1").mouseenter(function() {  
     $(".information1").animate({ 
     top: topInitial }, "normal"); }); 

     $(".box1").mouseleave(function() { 
     $(".information1").animate({ 
     top: topAfter }, "normal"); }); 


     $(".box2").mouseenter(function() {  
     $(".information2").animate({ 
     top: topInitial }, "normal"); }); 

     $(".box2").mouseleave(function() { 
     $(".information2").animate({ 
     top: topAfter }, "normal"); }); 

     $(".box3").mouseenter(function() { 
     $(".information3").animate({ 
     top: topInitial }, "normal"); }); 

     $(".box3").mouseleave(function() { 
     $(".information3").animate({ 
     top: topAfter }, "normal"); }); 

     $(".box4").mouseenter(function() { 
     $(".information4").animate({ 
     top: topInitial }, "normal"); }); 

     $(".box4").mouseleave(function() { 
     $(".information4").animate({ 
     top: topAfter }, "normal"); }); 

     $(".box5").mouseenter(function() {  
     $(".information5").animate({ 
     top: topInitial }, "normal"); }); 

     $(".box5").mouseleave(function() { 
     $(".information5").animate({ 
     top: topAfter }, "normal"); }); 

     $(".leftbutton img").click(function() { 
     $(".box1").animate({ 
     marginLeft: "-=200px" }, "fast"); }); 

     $(".rightbutton img").click(function() { 
     $(".box1").animate({ 
     marginLeft: "+=200px" }, "fast"); }); 

    }); 
    </script> 
    </head> 

    <body> 
    <div class="leftbutton"><img src="left.gif"/></div> 
    <div id="container"> 

    <span class="box1"> 
    <div class="information1"> 
    <h3> Criminal Penguins Having a Ball </h3> 
    <p> You have never seen something like this before!</p> 
    </div> 
    </span> 

    <span class="box2"> 
    <div class="information2"> 
    <h3> Criminal Penguins Having a Ball </h3> 
    <p> You have never seen something like this before!</p> 
    </div> 
    </span> 

    <span class="box3"> 
    <div class="information3"> 
    <h3> Criminal Penguins Having a Ball </h3> 
    <p> You have never seen something like this before!</p> 
    </div> 
    </span> 

    <span class="box4"> 
    <div class="information4"> 
    <h3> Criminal Penguins Having a Ball </h3> 
    <p> You have never seen something like this before!</p> 
    </div> 
    </span> 


    <span class="box5"> 
    <div class="information5"> 
    <h3> Criminal Penguins Having a Ball </h3> 
    <p> You have never seen something like this before!</p> 
    </div> 
    </span> 

    </div> 
    <span class="rightbutton"><img src="right.gif"/></span> 
    </body> 
</html>

刪除class =「box5」中的註釋給了我在上面註釋中突出顯示的一些問題。我想知道我要去哪裏錯了。此外，對於滑塊，我打算更改邊距左/右屬性。這是一個滑塊實施的正確方法嗎？幫幫我！！

來源

2012-01-27 Cafecorridor