Question

我要实现的目的是使列表中的项目即使在两个方向上的最后一个项目上也继续滚动。即：让它继续从第一项或最后一项开始重新滚动。我已经解决了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>

使用CSS是非常基本的示例：

.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;
}

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

这里是FIDDLE LINK

Answer 1

所以您正在寻找这样的东西：-

var bgWidth = 350; //Max-width of <li> you would like to set.
var scrollPos = Math.ceil($('body').width() / 20);
$(document).ready(function() {
  $('body').width(bgWidth + $(window).width());
  $(window).scroll(function() {
    if ($(window).scrollLeft() >= ($('body').width() - $(window).width())) {
      $(window).scrollLeft(1 + scrollPos / 4);
    } else if ($(window).scrollLeft() == 0) {
      $(window).scrollLeft($('body').width() - $(window).width() - scrollPos / 4);
    }
  });
});
$(window).resize(function() {
  $('body').width(bgWidth + $(window).width());
});

.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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
    <li>
      <a href="#myGallery3 " data-slide-to="2 " data-tooltip="asaba "><img class="img-thumbnail " src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=4 "></a>
    </li>

    <li>
      <a href="#myGallery" data-slide-to="0" data-tooltip="acci"><img class="img-thumbnail" src="http://dummyimage.com/96x96/f0f0f0/626262.png&text=5">
      </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=6">
      </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=7">
      </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=8 "></a>
    </li>
  </ul>
</div>

希望这对您有帮助！

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

1 个答案: