jquery - 使用 jquery 水平滚动

Question

我有这样的情况:

<ul class=".pages-list">
    <li><img src="#"></li>
    <li><img src="#"></li>
    <li><img src="#"></li>
    <li><img src="#"></li>
    <li><img src="#"></li>
    <li><img src="#"></li>
    <li><img src="#"></li>
    <li><img src="#"></li>
    <li><img src="#"></li>
    <li><img src="#"></li>
</ul>
<ul class="to_the_right">
    <li><img src="#"></li>
    <li><img src="#"></li>
    <li><img src="#"></li>
    <li><img src="#"></li>
    <li><img src="#"></li>
</ul>
<ul id="controls">
    <li class="left">◄</li>
    <li class="right">►</li>
</ul>

.secondclass 在添加时接受新图像。

jQuery(document).ready(function( $ ){
   $('.to_the_right').each(function() {
      var $this = $(this);
      var width = $this.outerWidth();
      //$this.after($('<div style="width:' + width + 'px" >'));
     $('.to_the_right').css("width", (width - 230));
    console.log(width)

   if (window.location.href === "http://www.fractal-arch.com/projects/") {
      //    $('#full_width').css("width", (1519 + width));
        }   

  });
});

我已经对页面进行了编码，因此一旦在 .to_the_right ul 中添加了新的 li，它就会变宽

/*project Page */
ul.pages-list li, ul.to_the_right li {
    display: block;
    width: 220px;
    float: left;
    position: relative;
    margin: 5px;
}
ul.pages-list li a, ul.to_the_right li a {
    position: absolute;
    text-align: center;
    width: 100%;
    color: #fff;
    font-weight: bold;
    display: none;
    background: #0000006e;
    background-repeat: repeat;
    height: 100%;
    padding: 82px 45px 0 45px;
}
ul.pages-list li:hover a, ul.to_the_right li:hover a {
    display: block;
}
ul.pages-list li img, ul.to_the_right li img {
    max-width: 220px;
}
ul.pages-list{
    margin-left: 90px;
    width: 1151px;
    height: 450px;
    float: left;
}
ul.to_the_right{
    float: left;
  margin: 0px;
}
.page-id-447 #full_width {
  /*  width: 3000px; */
    max-width: 3000px;
}

我在页面底部有左右箭头。

我想知道如何在单击箭头时向左/向右滚动？ 这是页面的实际外观+新添加的内容 enter image description here

或者我如何通过单击这些箭头来滚动窗口栏(当添加更多 lis 时最终会出现)。 两个答案都很好。

Answer 1

您似乎正在寻找的解决方案听起来很像“旋转木马”——某些 div 或元素内的横向可滚动内容。

如果您还没有使用 Bootstrap 或某种可能实现其自己的轮播的 JavaScript 平台，您可以尝试类似这个库的东西来完成这个:

Slick jQuery Carousel

希望这对您有所帮助，但如果您需要更多帮助，请告诉我!

干杯。