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

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

干杯。

用jquery水平滚动

1 个答案: