Question

我正在尝试创建一个简单的滑块，但我没有太多运气。这是我正在使用的......

Javscript / jQuery的：

var $item = $('.slider');
var $vpw = $('.wrapper').width();
var $start = 0;
var $end = $vpw * 3;

$('.next').click(function () {
    if ($start < $end) {
        $item.animate({
            'left': '-=$vpm'
        });
    }
});
$('.prev').click(function () {
    if ($end < $start) {
        $item.animate({
            'left': '+=$vpm'
        });
    }
});

HTML：

<div class="wrapper">
    <div class="slider">
        <div class="item-post" style="background: url(http://4.bp.blogspot.com/-LjJWOy7K-Q0/VOUJbMJr0_I/AAAAAAAAdAg/I2V70xea8YE/s320-c/enviroment-5.jpg) center"></div>
        <div class="item-post" style="background: url(http://1.bp.blogspot.com/-l3UnbspFvv0/VOUK8M-34UI/AAAAAAAAdA0/ooGyXrHdNcg/s320-c/enviroment-2.jpg)"></div>
        <div class="item-post" style="background: url(http://2.bp.blogspot.com/-cun1kQ42IBs/VOUaSPfnebI/AAAAAAAAdBQ/yTEj9K-BGdk/s320-c/fashion-3.jpg)"></div>
        <div class="prev"></div>
        <div class="next"></div>
    </div>
</div>

CSS：

.wrapper {
    overflow: hidden;
    position: relative;
}
.slider {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
}
.item-post {
    width: 100%;
    height: 200px;
    background: rgba(0, 0, 0, 0.1);
    background-size: cover !important;
    background-position: center !important;
    position: absolute;
    top: 0;
}
.item-post:first-of-type { left: 0; }
.item-post:nth-of-type(2) { left: 100%; }
.item-post:last-of-type { left: 200%; }
.prev, .next {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 25px;
    background: rgba(0, 0, 0, 0.2);
    cursor: pointer;
}
.prev {
    left: 0;
}
.next {
    right: 0;
}

JSHint告诉我有一个语法错误，可能是因为我没有正确使用.width()，但我不确定如何。我要做的就是抓住那个元素的宽度。

$end变量仅设置为$vpm*3，因为这是100％元素的.item-post个，并且我不确定这是否是最好的方法。我不能只计算.item-post的数量，因为这个例子已被愚弄了。原始标记类似于地铁，并且在.item-post宽度内包含5个.slider个元素。这意味着在.slider元素的约300％中有15个item-post元素。

我的目标是创建一个滑块，在单击.next/.prev时向右/向左滚动，但不在现有内容之外，并且增量等于父级的宽度（.slider）。

我甚至不确定我的逻辑在创建此脚本时是否合理。

更新了jsFiddle：http://jsfiddle.net/51maaks8/5/

Answer 1

将您的JavaScript更改为此（添加了冒号）：

var $item = $('.slider');
var $vpw = $('.wrapper').width();
var $start = 0;
var $end = $vpw * 3;

或者这个（var已删除）：

var $item = $('.slider'),
$vpw = $('.wrapper').width(),
$start = 0,
$end = $vpw * 3;

修复语法问题。

简单滑块语法＆amp;其他可能的错误

1 个答案: