滚动一个圆的div无穷大

问题描述：

嗨，我想滚动一个div无穷大圆（水平）。当我向右滚动div并且结束时，它不应该停止，它应该从第一个项目开始，然后四处走动。目前，我只能从左到右滚动。它停在最后一个项目上。这是我的代码：滚动一个圆的div无穷大

$(".arrowLeft").click(function(){ 
 
    \t var e = $('.myList'); 
 
    var scrollLength = 20; 
 
\t e.scrollLeft(e.scrollLeft() - scrollLength); 
 
}); 
 

 
$(".arrowRight").click(function(){ 
 
    \t var e = $('.myList'); 
 
    var scrollLength = 20; 
 
\t e.scrollLeft(e.scrollLeft() + scrollLength); 
 
});

.wrapper { 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
.myList { 
 
    width: 100px; 
 
    height: 50px; 
 
    background-color: grey; 
 
    display: flex; 
 
    flex-direction: row; 
 
    overflow-y: hidden; 
 
    overflow-x: auto; 
 
    padding: 10px; 
 
} 
 

 
.arrows { 
 
    height: 100%; 
 
    width: 30px; 
 
    background-color: rgb(240, 240, 240); 
 
    text-align: center; 
 
    cursor: pointer; 
 
} 
 

 
.listItems { 
 
    height: 100%; 
 
    width: 150px; 
 
    color: white; 
 
}

<html> 
 
    <head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    </head> 
 
    
 
    <body> 
 
    <div class="wrapper"> 
 
     <div class="arrows arrowLeft">&larr;</div> 
 
    
 
     <div class="myList"> 
 
     <div class="listItem">Item 1</div> 
 
     <div class="listItem">Item 2</div> 
 
     <div class="listItem">Item 3</div> 
 
     <div class="listItem">Item 4</div> 
 
     <div class="listItem">Item 5</div> 
 
     </div> 
 
    
 
     <div class="arrows arrowRight">&rarr;</div> 
 
    </div> 
 
    </body> 
 
</html>

我想滚动infinitiy当我点击左右箭头。

下面的例子与右箭头一个描绘的图画：

感谢

答

你说这个？

$(".arrowLeft").click(function() { 
 
    var e = $('.myList'); 
 
    var scrollLength = 20; 
 
    e.scrollLeft(e.scrollLeft() - scrollLength); 
 
    if (e.scrollLeft() == 0) { 
 
    $('.listItem').last().insertBefore($('.listItem').first()); 
 
    e.scrollLeft(e.scrollLeft() - scrollLength); 
 
    } 
 
}); 
 

 

 
$(".arrowRight").click(function() { 
 
    var e = $('.myList'); 
 
    var scrollLength = 20; 
 
    e.scrollLeft(e.scrollLeft() + scrollLength); 
 
    if (e.scrollLeft() + e.outerWidth() == e[0].scrollWidth) { 
 
    $('.listItem').first().insertAfter($('.listItem').last()); 
 
    e.scrollLeft(e.scrollLeft() + scrollLength); 
 
    } 
 
});

.wrapper { 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
.myList { 
 
    width: 100px; 
 
    height: 50px; 
 
    background-color: grey; 
 
    display: flex; 
 
    flex-direction: row; 
 
    overflow-y: hidden; 
 
    overflow-x: auto; 
 
    padding: 10px; 
 
} 
 

 
.arrows { 
 
    height: 100%; 
 
    width: 30px; 
 
    background-color: rgb(240, 240, 240); 
 
    text-align: center; 
 
    cursor: pointer; 
 
} 
 

 
.listItems { 
 
    height: 100%; 
 
    width: 150px; 
 
    color: white; 
 
}

<html> 
 
    <head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    </head> 
 
    
 
    <body> 
 
    <div class="wrapper"> 
 
     <div class="arrows arrowLeft">&larr;</div> 
 
    
 
     <div class="myList"> 
 
     <div class="listItem">Item 1</div> 
 
     <div class="listItem">Item 2</div> 
 
     <div class="listItem">Item 3</div> 
 
     <div class="listItem">Item 4</div> 
 
     <div class="listItem">Item 5</div> 
 
     </div> 
 
    
 
     <div class="arrows arrowRight">&rarr;</div> 
 
    </div> 
 
    </body> 
 
</html>

你好，感谢您的回答。这不是我搜索的解决方案。这个想法是，当我点击右箭头并点击它直到我到达最后并且比点击进度时，它应该向我显示“项目1”等等。左边是一样的：当我到达最后并点击前进时，它应该显示给我“Item 5”等等。像在一个圈子里... – MrBuggy

请看看我的编辑问题 – MrBuggy

请检查更新的答案;）希望这是你想要的。 – NiZa

滚动一个圆的div无穷大

相关推荐