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/

制作一个简单的jQuery滑块

1 个答案: