制作一个简单的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);
});

}
}

这意味着当点击一个按钮时,移动包含500px左图像的1500px宽的div.滑块位于容器div内,宽度为500px,隐藏溢出.if语句是为了确保div在到达容器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/