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

Help with modifying my custom JQuery slider to allow continous scrolling

本文关键字：许连续 连续 滚动 我的 修改 自定义 JQuery 滑块 帮助      更新时间：2023-09-26

你可以在这里查看我的自定义滑块:http://www.awaismuzaffar.com/examples/index.html

下面是它的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
            }
        });
    });

我正在尝试修改这个滑块以允许连续滚动。

我不确定如何实现这一点，我假设我需要使用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();
    }

试一试，希望能成功。现在，为了稍微清理一下代码，我建议使用css类代替内联背景颜色等

这是一个解决方案(有点像Shaz的)，只是更少的代码:):

$(document).ready(function(){    
    $('#previous-button').click(function(){slidePanel(-1)});
    $('#next-button').click(function(){slidePanel(1)});
    var n = 0;
    var animating = false;
    $('#slide-'+n).css('display', 'block');
    function slidePanel(delta)
    {
        if(!animating)
        {
            animating = true;
            var d = (delta > 0 ? $('#slide-'+n).width()*-1 :  $('#slide-'+n).width());
            $('#slide-'+n).animate({
                left: "+="+d
            }, 'slow', function() { $(this).css('display', 'none'); animating = false; });
            n = (n + delta) % $('div.slide').length;
            n = n < 0 ? $('div.slide').length + n : n;
            $('#slide-'+n).css('left', $('#slide-container').offset().left +(d*-1));
            $('#slide-'+n).css('display', 'block');
            $('#slide-'+n).animate({
                left: 0
            }, 'slow');
        }
    }
});

点击这里查看示例。

(我知道有一种方法可以用一个线性方程计算出"当前幻灯片"，但我想我现在已经脑死亡了:p)

(为避免重复点击而编辑)

试试这样做:http://fiddle.jshell.net/Shaz/dsBkf/

相关文章：