返回从滚动条的末尾开始

Question

I created a kind of fake scroll using JS as my boss is using a Mac and scrollbars are turned off by default and he wanted to see what was going on.

My code for this is like so:

 $(function() { var popular_products_span = $("#popular_products_span"); var items = popular_products_span.children(); popular_products_span.prepend('<div id="right-button"><a href="#"><</a></div>'); popular_products_span.append('<div id="left-button"><a href="#">></a></div>'); items.wrapAll('<div id="inner" />'); popular_products_span.find('#inner').wrap('<div id="outer"/>'); var outer = $('#outer'); var updateUI = function() { var maxWidth = outer.outerWidth(true); var actualWidth = 0; $.each($('#inner >'), function(i, item) { actualWidth += $(item).outerWidth(true); }); }; updateUI(); $('#right-button').click(function() { var leftPos = outer.scrollLeft(); outer.animate({ scrollLeft: leftPos - 300 }, 300); }); $('#left-button').click(function() { var leftPos = outer.scrollLeft(); outer.animate({ scrollLeft: leftPos + 300 }, 300); }); $(window).resize(function() { updateUI(); }); });

 #popular_products_span{ overflow:hidden; } img{ padding:10px; } #outer { float:left; width:400px; overflow:hidden; white-space:nowrap; display:inline-block; } #left-button { float:left; } #right-button { float:left; } #inner:first-child { margin-left:0; } .hide { display:none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <span id="popular_products_span"> <img src="http://via.placeholder.com/100x100"> <img src="http://via.placeholder.com/100x100"> <img src="http://via.placeholder.com/100x100"> <img src="http://via.placeholder.com/100x100"> <img src="http://via.placeholder.com/100x100"> <img src="http://via.placeholder.com/100x100"> <img src="http://via.placeholder.com/100x100"> <img src="http://via.placeholder.com/100x100"> <img src="http://via.placeholder.com/100x100"> </span>

However, I want it to scroll through endlessly so instead of coming to an end you will go back to the start again and am not sure how to go about this.

Answer 1

这就是我最终使用更容易的https://kenwheeler.github.io/slick/