制作一个简单的jQuery滑块

Question

我想教自己的javascript/jquery，所以我设置了一个项目来为我的网站创建一个非常基本的滑块。使用Codeacademy和jQuery API库我已经熟悉了代码，但是难以掌握语法。因此，我会通过某人拼写检查我的努力来到这里寻求帮助。

下面的代码：

CSS：

#wrapper { width: 500px; height:300px; display: block; overflow: hidden; } 
#slider {width: 1500px; clear: both; margin-left:0;} 
.content {float: left; width: 500px; height: 300px; display: block; background:grey;} 

HTML：

<div id="wrapper"> 
    <div id="slider"> 
     <div class="content"><p>blah</p></div> 
     <div class="content"><p>blah</p></div> 
     <div class="content"><p>blah</p></div> 
    </div> 
</div> 

<button id="left">left</button> 
<button id="right">right</button> 

最后：

$#left.click(function { 
if ($('#slider').css('margin-left').between(0,-1500)) { 
    $('#slider').animate({ 
     margin-left : "+=500" 
    }, 500); 
}); 

} 
} 

它转换为移动包含1500px宽的格ima当单击按钮时，ges左边500px。滑块位于容器div内，其宽度为500px，隐藏溢出。如果声明是确保股利不继续行驶离开它已经达到了容器div的结束

我完全感谢任何人谁可以与此相当自私的请求帮助之后

Answer 1

这里是你的js代码的语法错误，如上所述，以及一些其他错误，这些错误导致您的代码无法正常运行。

$('#left').click(function(){ 
    if ($('#slider').css('margin-left') <= '0px' && $('#slider').css('margin-left') >= '-1500px') {  
    $('#slider').animate({ 
      "margin-left" : "+=500" 
     }, 500); 
    }; 
}); 

注：我已删除了.between（）函数的代码，因为我无法找到在此任何地方的任何文件。如果你有这个功能的参考，我很乐意看到它。目前，我用一个简单的值比较来代替它。

这里是你的代码的工作一个的jsfiddle：http://jsfiddle.net/ghCX6/2/