7

我正在尝试自学 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);
});

}
}

当单击按钮时，这意味着将包含图像的 1500 像素宽的 div 移动 500 像素。滑块位于具有 500 像素宽度和隐藏溢出的容器 div 中。if 语句是为了确保 div 在到达容器 div 的末尾后不会继续向左移动

我非常感谢任何可以帮助解决这个相当自私的请求的人

4

1 回答 1

2

这是您的 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/

于 2012-08-27T00:36:53.407 回答