Question

我创建了一个点击触发的评论部分，我想要实现的是当上次评论出现时，第一次评论会在连续循环后出现。

/* Set global variables */
var position = $(".reviews").position(); /* Find position of review container */
var items = $(".reviews ul li").length; /* Count how many reviews there are */
var limit = (items - 2) * -435; /* Set the movement limit as a multiple of the number of items */

$(".number").text(items);

/* Next button clicked */
$(".btn_next").click(function () {

position = $(".reviews").position();

/* Debugging Info */
/* $(".left").text(Position: " + position.left + " & " + "Items: " + items  + " & " + "Limit: " + limit); */

/* If the review container’s left value is still larger than the movement limit, move the container one view to the left */
if (position.left > limit) {
    $(".reviews").animate({
        "left": "-=460px"
    }, 500, "swing");
} else {
    /* $(".left").prepend("No dice! "); */
}

});

/* Prev button clicked */
$(".btn_prev").click(function () {

    position = $(".reviews").position();

    /* Debugging Info */
    /* $(".left").text("Position: " + position.left + " & " + "Items: " + items  + " & " + "Limit: " + limit); */

    /* If the review container’s left value is still smaller than 0, move the container one view to the right */
    if (position.left < 0) {
        $(".reviews").animate({
            "left": "+=460px"
        }, 500, "swing");

} else {
    /* $(".left").prepend("No dice! "); */
}

});

Answer 1

您必须对代码进行一些小的更改向左滚动到最后一个项目而不是

if (position.left > limit) {
    $(".reviews").animate({
           "left": "-=460px"
    }, 500, "swing");
} else {
    /* $(".left").prepend("No dice! "); */
}

把这个：

if (position.left > limit) {
    val = "-=460";
} else {  
    val = 8;
}
$(".reviews").animate({
        "left": val + 'px'
}, 500, "swing");

向右滚动到第一个项目而不是：

if (position.left < 0) {
    $(".reviews").animate({
        "left": "+=460px"
    }, 500, "swing");
} else {
    /* $(".left").prepend("No dice! "); */
}

把这个：

if (position.left < 0) {
    val = "+=460"
} else {
    val = (items - 2) * (-460);
}
$(".reviews").animate({
        "left": val + 'px'
}, 500, "swing");

http://jsfiddle.net/kvVC7/3/

Answer 2

你可以做的是，当用户按左键并且它已经在左侧时，向右滚动。

它不会在循环中显示审阅，但是当您按箭头时它会循环。

示例：

if (position.left < 0) {
    $(".reviews").animate({
        "left": "+=460px"
    }, 500, "swing");

} else {
    var restartPos = 460 * (items-2);
    $(".reviews").animate({
        "left": "-="+restartPos+"px"
    }, 500, "swing");
}

JS fiddle

希望有所帮助

连续循环上的滑块

2 个答案: