尝试创建无限循环列表

Question

我有大约20个项目的动画列表。我已经能够为页面加载中的列表从左到右制作动画。

但是，我想使此列表无限循环。换句话说，如果可以的话，我想将此列表连续“追加”到最后一项。

如果有可行的方法可以实现这一目标，请有人指导我吗？谢谢。

这是我的代码：

<style type="text/css">#mydivjeff {;max-width:1200px;white-space: nowrap;}#mydivjeff > div {  width: 130px;  background: black;  border: 3px solid white;  height: 20px;  display: inline-block;}#mydivjeff .brand-data-section {padding-top:15px; padding-bottom:15px; height: 130px; background: rgb(255, 255, 255)} #mydivjeff .brand-data-section:not(:hover) { background: #FFFFFF; }  /* ------------------ MEDIA QUERIES ------------------ */  #mydivjeff .brand-data-section img:hover{border-radius:50%;
  box-shadow: 0 0 15px 3px #34D039}#mydivjeff .brand-data-section img{width:98px;height:98px}
</style>
<div id="mydiv">
<div id="mydivjeff">
<div class="cell reversed-color brand-data-section"><a href="/content/greenmountaincoffee"><img alt="Green Mountain Coffee Roasters" src="/medias/circle-cropped.png?context=bWFzdGVyfHRlc3QtYnJhbmQtYmFubmVyfDE0NTAzfGltYWdlL3BuZ3x0ZXN0LWJyYW5kLWJhbm5lci9oZGUvaDY1LzUyNDg2MTM2MDcwMTc0LnBuZ3w2NWEwOWExNmUyMDMzYTg2ODk4ODQ1Y2RiZTA4MGQyMDg5ZTRlZDcyNTNjNjkwMGY4MjU5YjllNjhhNTdiNTQy" /></a></div>

<div class="cell reversed-color brand-data-section"><a href="/beverages/coffee/c/coffee101?q=brand:STARBUCKS&amp;sort=popular-all&amp;layoutStatus=grid&amp;show=Page"><img alt="Starbucks" src="/medias/starbucks.PNG?context=bWFzdGVyfHRlc3QtYnJhbmQtYmFubmVyfDIyNDAyfGltYWdlL3BuZ3x0ZXN0LWJyYW5kLWJhbm5lci9oYzEvaDE1LzUyNDk0MDUzODM0NzgyLnBuZ3wyM2IwMGY3ZmE1MGVlNjFkZWU2NDMwNDVjNWViMWUyMzEwNTk0OGJlODhhZGJiYjIyYmU1MDk1NGY5MTlhYTQ2" /></a></div>

<div class="cell reversed-color brand-data-section"><a href="/beverages/coffee/c/coffee101?q=brand:FOLGERS&amp;sort=popular-all&amp;layoutStatus=grid&amp;show=Page"><img alt="Folgers" src="/medias/folgers.png?context=bWFzdGVyfHRlc3QtYnJhbmQtYmFubmVyfDE5ODE0fGltYWdlL3BuZ3x0ZXN0LWJyYW5kLWJhbm5lci9oY2IvaDEwLzUyNDg2MTQwNDkzODU0LnBuZ3w1ZjA1ZDU2MGFmNzlmNmE4ODE5NzhhZTFmNzI1YWVmZmVmZDNiMzZlYzkwYmZiODcxZTFjM2FiNzNlN2NiMDg2" /></a></div>

<div class="cell reversed-color brand-data-section"><a href="/eight-oclock-coffee"><img alt="Eight O'Clock" src="/medias/eightoclock.png?context=bWFzdGVyfHRlc3QtYnJhbmQtYmFubmVyfDE4MjAzfGltYWdlL3BuZ3x0ZXN0LWJyYW5kLWJhbm5lci9oYTQvaGI4LzUyNDk0MDcyODcyOTkwLnBuZ3wyMTQ3OGRiNDM4MjU2NTNmOTU3MmM0YjBiYzI3NTI5M2Q4MjM2MmExOGVlNDdkMWM5MzUwNDcwOGUwZjYxYjgx" /></a></div>

<div class="cell reversed-color brand-data-section"><a href="/beverages/c/beverages101?q=brand:DUNKIN_DONUTS&amp;sort=popular-all&amp;layoutStatus=grid&amp;show=Page"><img alt="Dunkin' Donuts" src="/medias/dunkin.png?context=bWFzdGVyfHRlc3QtYnJhbmQtYmFubmVyfDE4OTg1fGltYWdlL3BuZ3x0ZXN0LWJyYW5kLWJhbm5lci9oMmQvaGJiLzUyNDg2MTM3ODM5NjQ2LnBuZ3wxODA1Y2UyZjRlZTM4NTY5ZDJmNGVjZDk4ZTI4MWRiZmIzYjVmODBjMGMwNjBkYzY1NjU5ZDMzYjBlZTgzYzQ5" /></a></div>

<div class="cell reversed-color brand-data-section"><a href="/content/theoriginaldonutshop"><img alt="The Original Donut Shop" src="/medias/donut-shop.png?context=bWFzdGVyfHRlc3QtYnJhbmQtYmFubmVyfDIxOTY0fGltYWdlL3BuZ3x0ZXN0LWJyYW5kLWJhbm5lci9oMTcvaDhkLzUyNDg2MTM4MDM2MjU0LnBuZ3xmY2U2MzNjMjlmYjdjMjU0OGM2ZWQ3YzU1NzhlMzUwNzgwYjRmZjk5MjFmMjkxOGJhYmZjNDc0OWMyOGYzZmVh" /></a></div>

<div class="cell reversed-color brand-data-section"><a href="/beverages/coffee/c/coffee101?q=brand:BARISTA_PRIMA_COFFEEHOUSE&amp;sort=popular-all&amp;layoutStatus=grid&amp;show=Page "><img alt="Barista Prima" src="/medias/barista-prima.png?context=bWFzdGVyfHRlc3QtYnJhbmQtYmFubmVyfDI0MDYxfGltYWdlL3BuZ3x0ZXN0LWJyYW5kLWJhbm5lci9oNGUvaGVkLzUyNDk0MDcyOTcxMjk0LnBuZ3wxYzk5ZGY4ZTY3MDdiYTk5OGYxNzM5NjBkN2E3Njk0MzVmNDNhNDU1YTc0MzUxNmQ1Yzc1MWNmZDY5MDFmMGM0" /></a></div>

<div class="cell reversed-color brand-data-section"><a href="/beverages/coffee/c/coffee101?q=brand:CARIBOU_COFFEE&amp;sort=popular-all&amp;layoutStatus=grid&amp;show=Page"><img alt="Caribou" src="/medias/caribou.png?context=bWFzdGVyfHRlc3QtYnJhbmQtYmFubmVyfDE3MTQ0fGltYWdlL3BuZ3x0ZXN0LWJyYW5kLWJhbm5lci9oYjIvaDE5LzUyNDk0MDczMTAyMzY2LnBuZ3w1MmFkNWYyMzRiMDU1NzY3YmIxOTQwMmRmZWFmNzIxN2ZhYmQyYjYwMDUyZTQyMTAzZTE5ZTQ3MDQ3Y2FiZjBj" /></a></div>

<div class="cell reversed-color brand-data-section"><a href="/beverages/c/beverages101?q=brand:TULLYS&amp;sort=popular-all&amp;layoutStatus=grid&amp;show=Page "><img alt="Tully’s" src="/medias/tullys.png?context=bWFzdGVyfHRlc3QtYnJhbmQtYmFubmVyfDE4ODY3fGltYWdlL3BuZ3x0ZXN0LWJyYW5kLWJhbm5lci9oYjEvaDgyLzUyNDk0MDczMDY5NTk4LnBuZ3w5YjdhYTUxZDhjODRmMzYzYjYzZDAzZmUxNzBlOWM2ODI3YjU1OTEwZGQ0ZGIwNGY1NTgxMmNlNGE2YjQ5MWFl" /></a></div>
<!--- Row One Ends --->

<div class="cell reversed-color brand-data-section"><a href="/peets-coffee-tea"><img alt="Peets" src="/medias/peets-tbb.png?context=bWFzdGVyfHRlc3QtYnJhbmQtYmFubmVyfDE2NDY3fGltYWdlL3BuZ3x0ZXN0LWJyYW5kLWJhbm5lci9oN2MvaDFjLzUyNTg5MTg5NjkzNDcwLnBuZ3xlZWI5ZDkwMjYzOGVkNDk3MjJlM2I2OGQwODQ0MzcwNDBiMWE5ZDMzMGYwZTc1M2I5NmI1YjJmZmJkODJkMWJl" /></a></div>

<div class="cell reversed-color brand-data-section"><a href="/beverages/k-cup/c/kCup?q=brand:CAFE_ESCAPES&amp;sort=popular-all&amp;layoutStatus=grid&amp;show=Page"><img alt="Cafe Escapes" src="/medias/cafe-escapes-tbb.png?context=bWFzdGVyfHRlc3QtYnJhbmQtYmFubmVyfDIxNjI0fGltYWdlL3BuZ3x0ZXN0LWJyYW5kLWJhbm5lci9oOTAvaGZhLzUyNTg5MTg5NDMxMzI2LnBuZ3wwMTZjY2JhMWRjMWE1YjE3NzQ0MGY1NmViNDZiN2MzZDAwZjM1MGNmM2JlNzJlMGFjZDk5OGE1MDgxZmE3YzAw" /></a></div>

<div class="cell reversed-color brand-data-section"><a href="/gevalia-kaffe"><img alt="Gevalia Kaffe" src="/medias/gevalia-kaffe-tbb.png?context=bWFzdGVyfHRlc3QtYnJhbmQtYmFubmVyfDIwMTY1fGltYWdlL3BuZ3x0ZXN0LWJyYW5kLWJhbm5lci9oZWUvaDYwLzUyNTg5MTg5ODkwMDc4LnBuZ3xiN2MxY2QxMjY1NTIwNGYwMDgwOTI3NzQzODViY2ExMGFhMGNjNmU0OGE5Zjc1ODAxY2ZkOTU3Mzg4M2QxYzgz" /></a></div>

<div class="cell reversed-color brand-data-section"><a href="/celestial-seasonings"><img alt="Celestial Seasonings" src="/medias/celestial-seasonings.png?context=bWFzdGVyfHRlc3QtYnJhbmQtYmFubmVyfDIzOTYyfGltYWdlL3BuZ3x0ZXN0LWJyYW5kLWJhbm5lci9oYTYvaDExLzUyNTg5MTkwNjc2NTEwLnBuZ3xkM2ViMzY4Y2RjNjdlNTg4MGU5Yzc1ZWEzZmMxYWRhNWJkMzJjZjNmMGMyZDQ5ZDRiZmNkM2JkNDBhNjZjZjA1" /></a></div>

<div class="cell reversed-color brand-data-section"><a href="/twinings"><img alt="Twining's" src="/medias/twinings-tbb.png?context=bWFzdGVyfHRlc3QtYnJhbmQtYmFubmVyfDE4MTYwfGltYWdlL3BuZ3x0ZXN0LWJyYW5kLWJhbm5lci9oYjIvaDIzLzUyNTg5MTkyMDUyNzY2LnBuZ3xiODI1ZWU5MDFlYzdkYTNkOGRkMTQzNzc4NmY4MjZmNDdiNWFkMTQzNDZlOGNmNTM5YmRiNDkwOTIwYjIwOTI4" /></a></div>

<div class="cell reversed-color brand-data-section"><a href="/beverages/c/beverages101?q=brand:NEWMANS_OWN_ORGANICS&amp;sort=popular-all&amp;layoutStatus=grid&amp;show=Page"><img alt="Newman's Own Organics" src="/medias/newmans-own-organics-tbb.png?context=bWFzdGVyfHRlc3QtYnJhbmQtYmFubmVyfDE5Nzk1fGltYWdlL3BuZ3x0ZXN0LWJyYW5kLWJhbm5lci9oYzYvaGE3LzUyNTg5MTkyNTExNTE4LnBuZ3xkZmU0Y2E4MDZlOGVlMDY0NGU3ZjNlZmNjMzRjNjBjZDIzNGE4NDkyMTVlOGFhOGVjM2NiNmVlZDRjMmI1ZGYx" /></a></div>

<div class="cell reversed-color brand-data-section"><a href="/beverages/c/beverages101?q=brand:GLORIA_JEANS&amp;sort=popular-all&amp;layoutStatus=grid&amp;show=Page&amp;cm_sp=gloria+jeans+brand+page-_-lp+desktop-_-shop+all+varieties"><img alt="Gloria Jean's Coffee" src="/medias/gloria-jeans-tbb.png?context=bWFzdGVyfHRlc3QtYnJhbmQtYmFubmVyfDE5OTM4fGltYWdlL3BuZ3x0ZXN0LWJyYW5kLWJhbm5lci9oMjYvaDBiLzUyNTg5MTkyNzA4MTI2LnBuZ3wwNTllMDI1NDNjZWJiMWE5ZGMzYmUxNGJkZmY4OGIzYzM4YmI1MjIzOWYxNTdhNDlmZGRlMzc4YzEyMjVlYjM3" /></a></div>

<div class="cell reversed-color brand-data-section"><a href="/beverages/c/beverages101?q=brand:KRISPY_KREME_DOUGHNUTS&amp;sort=popular-all&amp;layoutStatus=grid&amp;show=Page"><img alt="Krispy Kreme Coffee" src="/medias/krispy-kreme-tbb.png?context=bWFzdGVyfHRlc3QtYnJhbmQtYmFubmVyfDI2NjM5fGltYWdlL3BuZ3x0ZXN0LWJyYW5kLWJhbm5lci9oMWUvaDgxLzUyNTg5MTkzMjMyNDE0LnBuZ3wyMmFjMTI2YTJlNzU1YzZjYzQ3OTliZDMyYzYzMzAzNGY2MDlkZGQwODQ5ZDBkN2U4Y2FkYzg3YWM3NzgwMzRm" /></a></div>

<div class="cell reversed-color brand-data-section"><a href="/beverages/c/beverages101?q=brand:DONUT_HOUSE_COLLECTION&amp;sort=popular-all&amp;layoutStatus=grid&amp;show=Page"><img alt="Donut House Collection" src="/medias/donut-house-collection-tbb.png?context=bWFzdGVyfHRlc3QtYnJhbmQtYmFubmVyfDIwNTc2fGltYWdlL3BuZ3x0ZXN0LWJyYW5kLWJhbm5lci9oMTYvaDlmLzUyNTg5MTkzMjk3OTUwLnBuZ3xkZGM3NWJhMzhkMzk4MDg2MDUxMjBmZmUxY2M4MzFjMmE0OGEwMmNhYTgzOTBkNmMyZDNjN2E1MzlkNzVkYzk0" /></a></div>
<!--- Row Two Ends --->

<div class="cell reversed-color brand-data-section"><a href="/Beverages/Coffee/Flavored/Classic-Cinnamon-Roll-Coffee/p/Classic-Cinnamon-Roll-Coffee-K-Cup-Cinnabon"><img alt="Cinnabon Coffee" src="/medias/cinnabon-tbb.png?context=bWFzdGVyfHRlc3QtYnJhbmQtYmFubmVyfDI0NTc1fGltYWdlL3BuZ3x0ZXN0LWJyYW5kLWJhbm5lci9oYTUvaDVhLzUyNTg5MTkzNDk0NTU4LnBuZ3w3YzUxNDBkMzhmNmJhZTMyYWU1ZTc4NGZjM2E1OTAwMmU3OGZiMDgwYTY4ZjFkZTg3Mjg3ODg4NTczZThlNGJi" /></a></div>

<div class="cell reversed-color brand-data-section"><a href="/beverages/c/beverages101?q=brand:CAFE_BUSTELO&amp;sort=popular-all&amp;layoutStatus=grid&amp;show=Page"><img alt="Cafe Bustelo" src="/medias/cafe-bustelo-tbb.png?context=bWFzdGVyfHRlc3QtYnJhbmQtYmFubmVyfDIzNDAxfGltYWdlL3BuZ3x0ZXN0LWJyYW5kLWJhbm5lci9oMzQvaDc5LzUyNTg5MTkzNTYwMDk0LnBuZ3w3ZTI0MjZiY2QzODdjNGUwMmQwYTJlMzUwNjFkZGE4ZDMxNzFkOWMxNWExNTU1NDE4OGFjNDU2ZDc0N2VlMjJj" /></a></div>

<div class="cell reversed-color brand-data-section"><a href="/emerils"><img alt="Emeril's Coffee" src="/medias/emeril-tbb.png?context=bWFzdGVyfHRlc3QtYnJhbmQtYmFubmVyfDIwNzQ0fGltYWdlL3BuZ3x0ZXN0LWJyYW5kLWJhbm5lci9oNjEvaDJjLzUyNTg5MTkzNzU2NzAyLnBuZ3xiOWI0YmU2YzIwMmNkYzliZDhkNTk1ZmUzNTk4Yzc1NGRjZTM1NWI5MzU2NmI5NmZkNjczNGZmNGU3N2Q5YjU4" /></a></div>
<!--- Row Three Ends ---></div>
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script type="text/javascript">function animatethis(targetElement, speed) {
var width = $(targetElement).width();
    $(targetElement).animate({ marginLeft: "-="+width},
    {
        duration: speed,
        complete: function ()
        {
            targetElement.animate({ marginLeft: "+="+width },
            {
                duration: speed,
                complete: function ()
                {
                    animatethis(targetElement, speed);
                }
            });
        }
    });

};
if (document.readyState !== "loading") {
    animatethis($('#mydivjeff'), 25000);;
}
else {
    document.addEventListener('DOMContentLoaded', function() {
        animatethis($('#mydivjeff'), 25000);;
    })
}	
</script>