如何实现Div滑动至两端时返回起点（含自动滑动与按钮控制）

针对你遇到的轮播组件两端循环问题，我来帮你梳理并解决这个问题，同时补上自动滑动的功能：

一、修复两端循环的点击逻辑 #

你的代码已经能检测到滑块到达左右两端，但缺少重置位置和计数器的核心逻辑。我们需要在触发末端提示时，直接让滑块跳转到对应的起始/末尾位置，并重置计数器：

关键修改点： #

• 调整点击事件的判断顺序，先处理边界情况，再执行正常滑动逻辑
• 当到达右末端（counter == x）时，将滑块动画到初始位置（left: 0），并把counter重置为1
• 当到达左末端（counter == 1）时，计算最右侧的目标位置（-width*(x-1)），将滑块动画到该位置，同时把counter重置为x

二、添加自动滑动功能 #

通过setInterval实现定时自动滑动，同时添加鼠标悬停暂停、离开恢复的交互，避免用户操作时自动滑动干扰体验。

修改后的完整代码 #

var n = 3; // total number of slides to be display at once
var totalDeal = 9; // total deals to be display
var sliderTotalWidth = 100; // in percentage append % later
var z = (100 / totalDeal) + '%'; // ddslides width
var x = totalDeal / n;
var counter = 1;
var autoSlideInterval;

$("#dialyDealSlider").css('width', x + '00%');
fillDailyDeal(totalDeal, z);

function fillDailyDeal(totalDeal, z) {
    var imgUrl = '{$img}';
    var ext = '.jpg';
    var width = "width:" + z;
    for (var i = 1; i <= totalDeal; i++) {
        var myDiv = $( "<div class='ddslides' style='" + width + "' >" +
            '<div class="dddesc">' +
                '<div class="ddtitle">' +
                    '<a href="#">The is the title of the item it\'s a long title</a>' +
                '</div>' +
                "<div class='ddprice'>$"+i+"00</div>" +
                '<button class="ddview" title="View Item">view item</button>' +
            '</div>' +
            '<div class="ddimg">' +
            '</div>' +
            '<div class="vDivider"></div>' +
            '<div class="ddSaleBadge">sold 44%</div>' +
        '</div>');
        $("#dialyDealSlider").append(myDiv);
    }
}

// 自动滑动启动函数
function startAutoSlide() {
    autoSlideInterval = setInterval(function() {
        $("#next").click();
    }, 3000); // 每3秒自动滑动一次，可根据需求调整时间
}

// 暂停自动滑动
function stopAutoSlide() {
    clearInterval(autoSlideInterval);
}

// 初始化自动滑动
startAutoSlide();

// 鼠标悬停滑块时暂停自动滑动，离开后恢复
$("#dialyDealSlider").hover(stopAutoSlide, startAutoSlide);

$("#prev, #next").click(function() {
    var ddslidesWidth = $(".ddslides").width();
    var width = ddslidesWidth * n;
    var dir = this.id == "next" ? '-=' : '+=';

    if (this.id == "next") {
        // 处理右末端循环逻辑
        if (counter == x) {
            $("#dialyDealSlider").animate({ left: '0px' }, 800);
            counter = 1;
            return; // 跳过后续正常滑动逻辑
        }
        counter++;
    } else {
        // 处理左末端循环逻辑
        if (counter == 1) {
            $("#dialyDealSlider").animate({ left: -width*(x-1) + 'px' }, 800);
            counter = x;
            return; // 跳过后续正常滑动逻辑
        }
        counter--;
    }

    // 正常滑动逻辑
    $("#dialyDealSlider").animate({ left: dir + width }, 800);
});

代码说明： #

1. 循环逻辑修复：在点击按钮时优先判断是否到达边界，若触发边界则直接跳转到对应位置并重置计数器，避免执行多余的滑动动画。
2. 自动滑动实现：通过定时器定时触发next按钮的点击事件，同时监听滑块的hover事件来控制自动滑动的暂停与恢复，提升交互友好度。
3. 位置计算：左末端跳转时，-width*(x-1)是滑块需要移动的总距离，确保直接跳转到最后一组轮播图的位置，实现无缝循环。

这样修改后，当你滑动到$700-$900的右末端时，再点击next按钮就会自动跳回$100-$300的起始位置；左末端点击prev也会跳转到最后一组，同时还能实现自动轮播的效果。

内容的提问来源于stack exchange，提问作者sam