制作一个简单的jQuery滑块

Question

制作一个简单的jQuery滑块

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像素。滑块位于一个容器div内，该容器div具有500像素的宽度和隐藏的溢出。if语句是为了确保在达到容器div的末端后，div不会继续向左移动。非常感谢能够帮助这个有点自私的请求的任何人。

- Hello World

$#left.click(function { [...] 需要改为 $('#left').click(function{ [...]，对吗？ - Gabriel Santos

我看到了语法错误，$#left 应该是 $('#left')。 - Musa

除了上面指出的错误之外，@Hello World 程序看起来没什么问题。 - Dmitry Koroliov

这个解决方案似乎更好，因为你不需要手动输入像素。https://stackoverflow.com/questions/24013942/simple-slider-using-jquery/24014181 - John M.

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ObstacleCoder · Accepted Answer

这是您的JavaScript代码，已经修复了上述语法错误以及其他几个错误，这些错误导致您的代码无法正确运行。

$('#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/