jquery - 制作一个简单的 jQuery slider

Question

这个问题已经有答案了:

Simple way of creating jQuery Slider (1 个回答)

已关闭 7 年前。

我正在尝试自学 javascript/jquery，因此我为自己设定了一个项目，为我的网站创建一个非常基本的 slider 。使用 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 像素。 slider 位于宽度为 500px 且 overflow hidden 的容器 div 内。 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/