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);

我已将滚动条设置为正文，因此在示例中不起作用，但在您的网站上应该可以正常工作。