Javascript 如何在列表（li）元素上进行无限水平滚动_Javascript_Jquery_Css

Javascript 如何在列表（li）元素上进行无限水平滚动

javascript jquery css

Javascript 如何在列表（li）元素上进行无限水平滚动,javascript,jquery,css,Javascript,Jquery,Css,我希望实现的是使列表中的项目即使在最后一个项目上也能在两个方向上继续滚动。i、 e：让它从第一个或最后一个项目开始再次滚动。我已经计算出了HTML和CSS，但不知道在js/jquery中使用什么方法。我真的非常感谢任何帮助或一个好的指针。这是HTML <html> <div class="container"> <ul class="horscroll" id="autoscrollR"> <li> <a href="#myGallery"

我希望实现的是使列表中的项目即使在最后一个项目上也能在两个方向上继续滚动。i、 e：让它从第一个或最后一个项目开始再次滚动。我已经计算出了HTML和CSS，但不知道在js/jquery中使用什么方法。我真的非常感谢任何帮助或一个好的指针。这是HTML

<html>
<div class="container">
<ul class="horscroll" id="autoscrollR">
<li>
<a href="#myGallery" data-slide-to="0" data-tooltip="acci"><img 
class="img-thumbnail" 
src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=1" >
                                     </a>
</li>
<li>
  <a href="#myGallery2" data-slide-to="1" data-tooltip="aiico"><img 
class="img-thumbnail" 
src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=2">
                                    </a>
</li>
<li>
  <a href="#myGallery3" data-slide-to="2" data-tooltip="asaba"><img 
class="img-thumbnail" 
src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=3">
                                    </a>
</li>
 ...........
</ul>
</div> </html>

现在，要使用的Js函数就是我遇到的问题

这是

所以你要找的是这样的东西：-

var bgWidth=350//要设置的的最大宽度。
var scrollPos=Math.ceil（$（'body'）.width（）/20）；
$（文档）.ready（函数（）{
$（'body'）.width（bgWidth+$（window.width（））；
$（窗口）。滚动（函数（）{
if（$（window.scrollLeft（）>=（$（'body'）.width（）-$（window.width（）））{
$（窗口）。向左滚动（1+scrollPos/4）；
}else if（$（窗口）.scrollLeft（）==0）{
$（窗口）.scrollLeft（$（'body'）.width（）-$（窗口）.width（）-scrollPos/4）；
}
});
});
$（窗口）。调整大小（函数（）{
$（'body'）.width（bgWidth+$（window.width（））；
});
.container{
最大宽度：100%；
}
霍克斯勒先生{
显示：-webkit内联框；
宽度：100%；
溢出：自动；
利润率：10px；
}
保险商实验室{
填充：0；
保证金：0；
列表样式：无；
}
李{
显示：列表项；
文本对齐：-webkit匹配父项；
}
.img缩略图{
保证金：5px 5px 0px 5px；
边框：1px实心#；
边界半径：4px；
}



















Hi@Jennis Vaishnav，谢谢你的贡献，这很有帮助，但我在这里看到了更多这种性质的东西：但问题是，这一个是通过单击而不是滚动来工作的
.container{
max-width: 100%;
}
.horscroll {
display: -webkit-inline-box;
width: 100%;
overflow: auto;
margin:10px;
}
ul {
padding: 0;
margin: 0;
list-style: none;

}
li {
display: list-item;
text-align: -webkit-match-parent;
}
.img-thumbnail {
margin: 5px 5px 0px 5px;
border: 1px solid #;
border-radius: 4px;
}