连续循环上的滑块

slider on continuous loop

本文关键字：循环 连续      更新时间：2023-09-26

我创建了一个点击即触发的评论部分，我想实现的是，当最后一个评论出现时，第一个评论出现在一个连续的周期之后。

JS fiddle

/* 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! "); */
}
});

您可以做的是，当用户向左按时，它已经在左边了，滚动到右边。

它不会循环显示评论，但当你按下箭头时，它会循环。

示例：

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

希望它能帮助

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

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/

相关文章：