jQuery导航轮播-Java 学习之路

我正在尝试进行类似旋转木马的导航和导航 .

这个脚本几乎像我预期的那样工作：https://jsfiddle.net/xpvt214o/23270/

Here is how it should work:
如果导航溢出，请显示下一个箭头 .
如果我们向右滚动，则使左箭头可见 .
如果导航没有溢出，则隐藏两个箭头 .

在第一个脚本中，我遇到了一些问题：
1）来自两个导航的上一个和下一个箭头适用于第一个导航
2）当我向右滚动并真正到达导航结束时，我需要再次单击下一个箭头才能隐藏它 .

为了使适当的箭头与它们的导航一起工作，我将主代码包装在一个函数中，并将 $('.go-left') 替换为 nav.find('.go-left') ，将右箭头替换为 nav.find('.go-left') . 这是代码：https://jsfiddle.net/0z5u4vyt/5/

箭头应该可以工作，但他们没有 . 拜托我需要你的帮忙！

1 回答

在您的JavaScript代码 var prevArrow = nav.find('.go-left'); 和 var nextArrow = nav.find('.go-right'); 没有获得 Value ，所以将您的代码更改为

var prevArrow = nav.siblings('.go-left');
var nextArrow = nav.siblings('.go-right');

function navCarousel(el) {
    var nav = el;
    var navFirstItem = nav.find('li:first-child');
    var navLastItem = nav.find('li:last-child');
    var prevArrow = nav.siblings('.go-left');
    var nextArrow = nav.siblings('.go-right');

    function checkNavOverflow() {
      if (nav.prop('scrollWidth') > nav.width() &&
         (nav.find('ul').width() - navLastItem.offset().left) < 51) {
        nextArrow.css('display', 'block');
      } else {
        nextArrow.css('display', 'none');
      }

      if (navFirstItem.offset().left < 15) {
        prevArrow.css('display', 'block');
      } else {
        prevArrow.css('display', 'none');
      }
    }
    checkNavOverflow();
    $(window).on('resize', function() {
      checkNavOverflow();
      // console.log(nav.find('ul').width() - navLastItem.offset().left);
    });
    prevArrow.click(function() {
      var pos = nav.scrollLeft() - 200;
      nav.animate( { scrollLeft: pos }, 300, checkNavOverflow());
    });
    nextArrow.click(function() {
      var pos = nav.scrollLeft() + 200;
      nav.animate( { scrollLeft: pos }, 300, checkNavOverflow());
    });
}

navCarousel($('.category-navigation .category-navigation-container'));

navCarousel($('.subcategory-navigation .subcategory-navigation-container'));

body {
  background: #20262e;
  padding: 0;
  margin: 0;
  font-family: Helvetica;
}
.category-navigation, .subcategory-navigation {
  background-color: #fff;
  position: relative;
  border-bottom: 1px solid grey;
}
.category-navigation-container, .subcategory-navigation-container {
  overflow: hidden;
}
.category-navigation ul, .subcategory-navigation ul {
  list-style: none;
  display: flex;
  white-space: nowrap;
}
.category-navigation ul li, .subcategory-navigation ul li {
  padding: 20px;
}
.category-navigation .go-left, .subcategory-navigation .go-left, .category-navigation .go-right, .subcategory-navigation .go-right {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  width: 20px;
  height: 20px;
  background-color: grey;
  z-index: 9;
  border-radius: 50%;
  padding: 10px;
  text-align: center;
}
.category-navigation .go-left, .subcategory-navigation .go-left {
  left: 0;
}
.category-navigation .go-right, .subcategory-navigation .go-right {
  right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="category-navigation">
  <div class="go-left">&larr;</div> 
  <div class="category-navigation-container">
    <ul>
      <li><a href="#">Category Item 1</a></li>
      <li><a href="#">Category Item 2</a></li>
      <li><a href="#">Category Item 3</a></li>
      <li><a href="#">Category Item 4</a></li>
      <li><a href="#">Category Item 5</a></li>
      <li><a href="#">Category Item 6</a></li>
      <li><a href="#">Category Item 7</a></li>
      <li><a href="#">Category Item 8</a></li>
      <li><a href="#">Category Item 9</a></li>
    </ul>
  </div>
  <div class="go-right">&rarr;</div>
</div>

<div class="subcategory-navigation dropdown">
  <div class="go-left">&larr;</div>
    <div class="subcategory-navigation-container">
      <ul>
        <li>
          <a href="#">
            <div>Subitem 1</div>
          </a>
        </li>
       </ul> 
    </div>
  <div class="go-right">&rarr;</div>
</div>

回复于 2024-05-08T23:34:23+08:00

jQuery导航轮播

1 回答

相关问题