Question

我想用Js在Bootstrap中制作一个水平时间线轮播，我不知道从哪里开始。结构如下。请帮助

我可以使用表列或列表项来执行此操作。通过单击箭头键，列表将向右滚动到左滚动一个月。我在互联网上找不到类似的代码。

<table width="100%" class="table table-responsive table-bordered">
  <tbody>
    <tr>
      <td width="20%" class=""><div class="stages ready" style="left: 0px;">
          <ul class="">
            <li data-stage-date="2018-07-01" class="ready" style="width: 480px; left: 0px;">
              <div class="interval"> <span class="title">July</span> </div>
              <div class="summary" data-open="0% of ₹0 " data-weighted-open="₹0" data-won="₹0" data-value="₹0" data-weighted-summary="₹0" data-percentage="0">
                <div class="icon"> <span class="plus" data-summary="₹0" data-weighted-open="₹0" data-open="0% of ₹0 " data-won="₹0">+</span>
                  <svg class="cui3-icon cui3-icon--s">
                    <use xlink:href="#icon-sm-weighted" href="#icon-sm-weighted"></use>
                  </svg>
                  <span class="number" data-summary="₹0" data-weighted-summary="" data-weighted-open="₹0" data-open="0% of ₹0 " data-won="₹0"></span> </div>
                <div class="totalSum"></div>
              </div>
            </li>
            <li data-stage-date="2018-08-01" class="ready" style="width: 480px; left: 480px;">
              <div class="interval"> <span class="title">August</span> </div>
              <div class="summary" data-open="100% of ₹10,000 " data-weighted-open="₹10,000" data-won="₹0" data-value="₹10,000" data-weighted-summary="₹10,000" data-percentage="100">
                <div class="icon"> <span class="plus" data-summary="₹10,000" data-weighted-open="₹10,000" data-open="100% of ₹10,000 " data-won="₹0">+</span>
                  <svg class="cui3-icon cui3-icon--s">
                    <use xlink:href="#icon-sm-weighted" href="#icon-sm-weighted"></use>
                  </svg>
                  <span class="number" data-summary="₹10,000" data-weighted-summary="" data-weighted-open="₹10,000" data-open="100% of ₹10,000 " data-won="₹0"></span> </div>
                <div class="totalSum"></div>
              </div>
            </li>
            <li data-stage-date="2018-09-01" class="ready" style="width: 480px; left: 960px;">
              <div class="interval"> <span class="title">September</span> </div>
              <div class="summary" data-open="0% of ₹0 " data-weighted-open="₹0" data-won="₹0" data-value="₹0" data-weighted-summary="₹0" data-percentage="0">
                <div class="icon"> <span class="plus" data-summary="₹0" data-weighted-open="₹0" data-open="0% of ₹0 " data-won="₹0">+</span>
                  <svg class="cui3-icon cui3-icon--s">
                    <use xlink:href="#icon-sm-weighted" href="#icon-sm-weighted"></use>
                  </svg>
                  <span class="number" data-summary="₹0" data-weighted-summary="" data-weighted-open="₹0" data-open="0% of ₹0 " data-won="₹0"></span> </div>
                <div class="totalSum"></div>
              </div>
            </li>
            <li data-stage-date="2018-10-01" class="ready" style="width: 480px; left: 1440px;">
              <div class="interval"> <span class="title">October</span> </div>
              <div class="summary" data-open="0% of ₹0 " data-weighted-open="₹0" data-won="₹0" data-value="₹0" data-weighted-summary="₹0" data-percentage="0">
                <div class="icon"> <span class="plus" data-summary="₹0" data-weighted-open="₹0" data-open="0% of ₹0 " data-won="₹0">+</span>
                  <svg class="cui3-icon cui3-icon--s">
                    <use xlink:href="#icon-sm-weighted" href="#icon-sm-weighted"></use>
                  </svg>
                  <span class="number" data-summary="₹0" data-weighted-summary="" data-weighted-open="₹0" data-open="0% of ₹0 " data-won="₹0"></span> </div>
                <div class="totalSum"></div>
              </div>
            </li>
            <li data-stage-date="2018-11-01" class="ready" style="width: 480px; left: 1920px;">
              <div class="interval"> <span class="title">November</span> </div>
              <div class="summary" data-open="0% of ₹0 " data-weighted-open="₹0" data-won="₹0" data-value="₹0" data-weighted-summary="₹0" data-percentage="0">
                <div class="icon"> <span class="plus" data-summary="₹0" data-weighted-open="₹0" data-open="0% of ₹0 " data-won="₹0">+</span>
                  <svg class="cui3-icon cui3-icon--s">
                    <use xlink:href="#icon-sm-weighted" href="#icon-sm-weighted"></use>
                  </svg>
                  <span class="number" data-summary="₹0" data-weighted-summary="" data-weighted-open="₹0" data-open="0% of ₹0 " data-won="₹0"></span> </div>
                <div class="totalSum"></div>
              </div>
            </li>
            <li data-stage-date="2018-06-01" class="ready" style="width: 480px; left: -480px;">
              <div class="interval"> <span class="title">June</span> </div>
              <div class="summary" data-open="0% of ₹0 " data-weighted-open="₹0" data-won="₹0" data-value="₹0" data-weighted-summary="₹0" data-percentage="0">
                <div class="icon"> <span class="plus" data-summary="₹0" data-weighted-open="₹0" data-open="0% of ₹0 " data-won="₹0">+</span>
                  <svg class="cui3-icon cui3-icon--s">
                    <use xlink:href="#icon-sm-weighted" href="#icon-sm-weighted"></use>
                  </svg>
                  <span class="number" data-summary="₹0" data-weighted-summary="" data-weighted-open="₹0" data-open="0% of ₹0 " data-won="₹0"></span> </div>
                <div class="totalSum"></div>
              </div>
            </li>
          </ul>
        </div></td>
    </tr>
  </tbody>
</table>

Answer 1

我认为您可以执行某些操作，但是这次，我使用了ul（list）。您可以使用scrollLeft（jQuery方法），因此唯一的工作就是正确设置新位置。

$("scroll content(ul)").scrollLeft("100(new position)");

For example。希望对您有帮助。

已更新
最后，我将向您展示一个示例。 Link

您有SyntaxError: Unexpected token .，因此请首先解决此错误。只要JavaScript运行没有错误，我就可以调试。

  ul.animate({
      ul.scrollLeft(ul.scrollLeft() + targetMonth.position().left - 15);
  }, 200);

  ↓

  ul.animate({
      scrollLeft: ul.scrollLeft() + targetMonth.position().left - 15
  }, 200);

最后
首先，在#date-list中添加一些样式和元素，以确认其正常工作。

/* ADDED */
#date-list {
    overflow-x: auto;
}

<ul id="date-list" class="d-flex">
    <li id="month-1" class="list-group-item">...</li>
    <li id="month-2" class="list-group-item">...</li>
    <li id="month-3" class="list-group-item">...</li>
    <li id="month-4" class="list-group-item">...</li>
    <li id="month-5" class="list-group-item">...</li>
    <li id="month-6" class="list-group-item">...</li>
    <!-- ADDED -->
    <li id="month-7" class="list-group-item">...</li>
    <li id="month-8" class="list-group-item">...</li>
</ul>

然后，在初始化过程中添加变量并修改逻辑。
（如果#date-list li的数量不是12时您应该正确处理）（但我想至少您有八个项目，因为您有“今天”按钮。）

// ADDED in init process. 
var listCount = $("#date-list li").length;

// using it instead of hard cording.
 } else if (currentMonth === listCount) {

现在，您可以看到滚动条，不要在CSS文件中添加类。
（如果要查看突出显示列表项所关注的位置。）

.list-group-item.active-month {
    color: #31708f;
    background-color: #d9edf7;
}

最后，如果您不想显示默认的滚动条，我认为最好的简单方法是使用webkit-scrollbar，但是不幸的是，这不适用于IE。

#date-list::-webkit-scrollbar {
    /* Of course, you can also change the scrollbar what it looks. */
    display: none;
}

如果您只需要工作IE11或Egde，建议您使用Perfect-scrollbar或其他插件，而不要自己实现。

如果您需要使用其他版本的IE，我将无能为力。（我没有环境。）

这里example使用perfect-scrollbar。

每月时间轴网格，从右向左水平滚动

1 个答案: