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