jQuery：向下滾動和向上滑動幻燈片效果

Question

下面的代碼在列表的四個元素上上下滑動。 這些元素當然有其高度。 所以問題是：如何上下滑動元素，同時滑動頁面滾動？

謝謝。

 $(document).ready(function() { var list = $(".partners__ul li"); var numToShow = 4; var button = $(".partners__button__a"); var numInList = list.length; var isShowing = true; list.hide(); if (numInList > numToShow) { button.show(); } list.slice(0, numToShow).show(); button.click(function() { var showing = list.filter(':visible').length; if (isShowing) { list.slice(showing - 1, showing + numToShow).fadeIn(100, onFadeComplete); } else { list.slice(showing - numToShow, numInList).fadeOut(100, onFadeComplete); } }); function onFadeComplete() { var nowShowing = list.filter(':visible').length; if (nowShowing == numInList && isShowing) { isShowing = false; button.text("Show less"); } else if (isShowing) { button.text("Show even more"); } if (nowShowing == numToShow) { button.text("Show more"); isShowing = true; } } }); 

 .partners__ul { list-style: none; padding: 0; margin: 0; } .partners__ul li { position: relative; margin-bottom: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <ul class="partners__ul"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> <li>Item 8</li> <li>Item 9</li> <li>Item 10</li> <li>Item 11</li> <li>Item 12</li> </ul> <button class="partners__button__a">Show More</button> <button class="partners__button__a_less" style="display:none">Show Less</button> </div> 

Answer 1

我通常會執行以下代碼來獲取幻燈片動畫：

$(".scrollto").click(function(e) { 
       var btn = $(e.currentTarget);
        $('html, body').animate({
            scrollTop: $(btn.attr("href")).offset().top 
        }, 1000);
    });

我使用上面的代碼對我的標頭網站實現動畫（幻燈片效果）。 您可以自己使用它。 另外，如果您願意，可以添加html代碼，我可以更新答案。

希望對您有所幫助。

編輯：

基本上，我在函數onFadeComplete()添加了一段代碼，如下所示： DEMO

$("html, body").animate({ scrollTop: $('.partners__ul li').last().offset().top }, 1000);

我已將滾動條設置為正文，因此在示例中不起作用，但在您的網站上應該可以正常工作。