Javascript 帮助修改自定义JQuery滑块以允许连续滚动

您可以在此处查看我的自定义滑块：

下面是它的JQuery代码：

 $(document).ready(function() {

        // Slider Function

        var slideWidth =  $('div.slide').width();

        // Set the left position of each div element

        $('div.slide').each(function(index){
            $(this).css('left', index * slideWidth ); // Multiply each div element by the index(0, 1 etc) so each div is placed inline
        });

        // Next step is to animate the div elements

        var clickCount = 1;
        var slideCount = $('div.slide').length;

        // Set the previous button to hide when loading with the first slide

        if(clickCount == 1){
            $('a#previous-button').css('background-color', '#cccccc');
        }

        $('a#next-button').click(function() {
           if(clickCount < slideCount) {
                $('div.slide').animate({"left":"-=" + slideWidth}, 'slow');
                $('a#previous-button').css('background-color', '#ffffff');
                clickCount++;
            }
            if(clickCount == slideCount) {
                $('a#next-button').css('background-color', '#cccccc'); // Hide or grey out button
            }
        });

        $('a#previous-button').click(function() {
            if(clickCount > 1){
                $('div.slide').animate({"left":"+=" + slideWidth}, 'slow');
                $('a#next-button').css('background-color', '#ffffff');
                clickCount--;
            }
            if(clickCount == 1){
                $('a#previous-button').css('background-color', '#cccccc'); // Hide or grey out button
            }
        });
    });

$（文档）.ready（函数（）{
//滑块函数
var slideWidth=$（'div.slide'）.width（）；
//设置每个div元素的左侧位置
$（'div.slide'）。每个（函数（索引）{
$（this.css（'left'，index*slideWidth）；//将每个div元素乘以索引（0、1等），以便将每个div内联放置
});
//下一步是设置div元素的动画
var-clickCount=1；
var slideCount=$（'div.slide'）。长度；
//将“上一步”按钮设置为在加载第一张幻灯片时隐藏
如果（单击计数=1）{
$（'a#previous button'）.css（'background-color'，'cccc'）；
}
$（'a#下一步按钮'）。单击（函数（）{
如果（单击计数<滑动计数）{
$（'div.slide'）。设置动画（{“left”：“-=”+slideWidth}，'slow'）；
$（'a#previous button'）.css（'background-color'，'#ffffff'）；
点击计数++；
}
如果（单击计数==滑动计数）{
$（'a#next button'）.css（'background-color'，'#cccc'）；//隐藏或灰显按钮
}
});
$（'a#上一个按钮'）。单击（函数（）{
如果（单击计数>1）{
$（'div.slide'）.animate（{“left”：“+=”+slideWidth}，'slow'）；
$（'a#next button'）.css（'background-color'，'#ffffff'）；
点击计数--；
}
如果（单击计数=1）{
$（'a#previous button'）.css（'background-color'，'#cccc'）；//隐藏或灰显按钮
}
});
});

我试图修改此滑块，以允许连续滚动

我不确定如何实现这一点，我假设我需要使用append，但我不确定如何使用它

---

谢谢。

您在手动操作，我想可能是其他人解决了这个问题。但在任何情况下，在单击“下一步”按钮时，您都需要在到达终点时加载其他内容。如果我是你，我会这样做：

    $('a#next-button').click(function() {
        ...

        if(clickCount == slideCount) {
            $('a#next-button').css('background-color', '#cccccc');
            $.get(moreContentUrl, objectRepresentingCurrentScrollPosition, loadContent);
            spinner.show(); // show some kind of spinner here (you can also hook up a default spinner on all ajax events with a global ajax handler
        }
    });

    function loadContent(response) {
        // append your content (your controller should return just the <div class="slide" /> elements, and give them a class="slide newSlide" so you can distinguish them below
        // you can also do client side templating here. would be more efficient, then just return the items as objects instead of html
        $('#slide-container').append(response.itemsHtml); 
        // slide all new divs right
        $('div.newSlide').animate({"left":"+=" + slideWidth}, 'fast');
        $('div.newSlide').removeClass('newSlide');

        // update variables and un-grey the next button
        $('a#previous-button').css('background-color', '#ffffff');
        slideCount += response.itemCount;

        // hide the spinner shown when starting the load
        spinner.hide();
    }

$（'a#下一步按钮'）。单击（函数（）{
...
如果（单击计数==滑动计数）{
$（'a#next button'）.css（'background-color'，'cccc'）；
$.get（moreContentUrl、objectRepresentingCurrentScrollPosition、loadContent）；
spinner.show（）；//在此处显示某种微调器（您还可以使用全局ajax处理程序在所有ajax事件上连接默认微调器）
}
});
函数加载内容（响应）{
//附加您的内容（您的控制器应该只返回元素，并给它们一个class=“slide newSlide”，以便您可以在下面区分它们
//你也可以在这里做客户端模板。这样效率会更高，只需将项目作为对象而不是html返回即可
$（“#幻灯片容器”）.append（response.itemsHtml）；
//将所有新的div滑到右侧
$（'div.newSlide'）.animate（{“left”：“+=”+slideWidth}，'fast'）；
$（'div.newSlide'）.removeClass（'newSlide'）；
//更新变量并取消“下一步”按钮的灰色
$（'a#previous button'）.css（'background-color'，'#ffffff'）；
slideCount+=response.itemCount；
//隐藏启动加载时显示的微调器
spinner.hide（）；
}

---

试一试，希望它能起作用。现在，为了稍微清理一下代码，我建议使用css类，而不是内联背景色等。

如果您是手动操作，我想其他人可能已经解决了这个问题。但是在任何情况下，在单击“下一步”按钮时，您都需要在点击如果我是你，我会这样做：

    $('a#next-button').click(function() {
        ...

        if(clickCount == slideCount) {
            $('a#next-button').css('background-color', '#cccccc');
            $.get(moreContentUrl, objectRepresentingCurrentScrollPosition, loadContent);
            spinner.show(); // show some kind of spinner here (you can also hook up a default spinner on all ajax events with a global ajax handler
        }
    });

    function loadContent(response) {
        // append your content (your controller should return just the <div class="slide" /> elements, and give them a class="slide newSlide" so you can distinguish them below
        // you can also do client side templating here. would be more efficient, then just return the items as objects instead of html
        $('#slide-container').append(response.itemsHtml); 
        // slide all new divs right
        $('div.newSlide').animate({"left":"+=" + slideWidth}, 'fast');
        $('div.newSlide').removeClass('newSlide');

        // update variables and un-grey the next button
        $('a#previous-button').css('background-color', '#ffffff');
        slideCount += response.itemCount;

        // hide the spinner shown when starting the load
        spinner.hide();
    }

$（'a#下一步按钮'）。单击（函数（）{
...
如果（单击计数==滑动计数）{
$（'a#next button'）.css（'background-color'，'cccc'）；
$.get（moreContentUrl、objectRepresentingCurrentScrollPosition、loadContent）；
spinner.show（）；//在此处显示某种微调器（您还可以使用全局ajax处理程序在所有ajax事件上连接默认微调器）
}
});
函数加载内容（响应）{
//附加您的内容（您的控制器应该只返回元素，并给它们一个class=“slide newSlide”，以便您可以在下面区分它们
//你也可以在这里做客户端模板。这样效率会更高，只需将项目作为对象而不是html返回即可
$（“#幻灯片容器”）.append（response.itemsHtml）；
//将所有新的div滑到右侧
$（'div.newSlide'）.animate（{“left”：“+=”+slideWidth}，'fast'）；
$（'div.newSlide'）.removeClass（'newSlide'）；
//更新变量并取消“下一步”按钮的灰色
$（'a#previous button'）.css（'background-color'，'#ffffff'）；
slideCount+=response.itemCount；
//隐藏启动加载时显示的微调器
spinner.hide（）；
}

试一试，希望它能起作用。现在，为了稍微清理一下代码，我建议使用css类而不是内联背景色等等。

试试这样的方法：

试试这样的方法：

这里有一个解决方案（有点像Shaz的），只需少一些代码：）：

$（文档）.ready（函数（）{
$（“#上一个按钮”）。单击（函数（）{slidePanel（-1）}）；
$（“#下一步按钮”）。单击（函数（）{slidePanel（1）}）；
var n=0；
var动画=假；
$（'#slide-'+n）.css（'display'，'block'）；
函数滑动面板（增量）
{
如果（！设置动画）
{
动画=真；
变量d=（增量>0？$（'#幻灯片-'+n）.width（）*-1:$（'#幻灯片-'+n）.width（））；
$（“#幻灯片-”+n）。设置动画({
左：“+=”+d
}，'slow'，function（）{$（this）.css（'display'，'none'）；animating=false；}）；
n=（n+delta）%$（'div.slide'）。长度；
n=n