逐项滚动轮播

Question

我的网站上有一个轮播。当我单击向右或向左箭头按钮时，它会滚动到轮播的最后一项或第一项。单击向右或向左箭头按钮时如何逐项滚动？

我正在使用以下代码：

// scroll to left
$(rightPaddle).on('click', function() {
    $('.menu').animate({scrollLeft: '+=1000'}, 600);
});

// scroll to right
$(leftPaddle).on('click', function() {
    $('.menu').animate({scrollLeft: '0'}, 600);
});

这是一个可行的示例：

// duration of scroll animation
var scrollDuration = 300;
// paddles
var leftPaddle = document.getElementsByClassName('left-paddle');
var rightPaddle = document.getElementsByClassName('right-paddle');
// get items dimensions
var itemsLength = $('.container-menu').length;
var itemSize = $('.container-menu').outerWidth(true);
// get some relevant size for the paddle triggering point
var paddleMargin = 20;

// get wrapper width
var getMenuWrapperSize = function() {
  return $('.menu-wrapper').outerWidth();
}
var menuWrapperSize = getMenuWrapperSize();
// the wrapper is responsive
$(window).on('resize', function() {
  menuWrapperSize = getMenuWrapperSize();
});
// size of the visible part of the menu is equal as the wrapper size 
var menuVisibleSize = menuWrapperSize;

// get total width of all menu items
var getMenuSize = function() {
  return itemsLength * itemSize;
};
var menuSize = getMenuSize();
// get how much of menu is invisible
var menuInvisibleSize = menuSize - menuWrapperSize;

// get how much have we scrolled to the left
var getMenuPosition = function() {
  return $('.menu').scrollLeft();
};

// finally, what happens when we are actually scrolling the menu
$('.menu').on('scroll', function() {

  // get how much of menu is invisible
  menuInvisibleSize = menuSize - menuWrapperSize;
  // get how much have we scrolled so far
  var menuPosition = getMenuPosition();

  var menuEndOffset = menuInvisibleSize - paddleMargin;

  // show & hide the paddles 
  // depending on scroll position
  if (menuPosition <= paddleMargin) {
    $(leftPaddle).addClass('hidden');
    $(rightPaddle).removeClass('hidden');
  } else if (menuPosition < menuEndOffset) {
    // show both paddles in the middle
    $(leftPaddle).removeClass('hidden');
    $(rightPaddle).addClass('hidden');
  } else if (menuPosition >= menuEndOffset) {
    $(leftPaddle).removeClass('hidden');
    $(rightPaddle).addClass('hidden');
  }
});

// scroll to left
$(rightPaddle).on('click', function() {
  $('.menu').animate({
    scrollLeft: '+=1000'
  }, 600);
});

// scroll to right
$(leftPaddle).on('click', function() {
  $('.menu').animate({
    scrollLeft: '0'
  }, 600);
});

body {
  margin: 100px
}

.menu-wrapper {
  position: relative;
  max-width: 1119px;
  height: 100%;
  margin: 0;
}

.menu {
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.paddle {
  position: absolute;
  top: 0;
  bottom: 0;
  cursor: pointer;
  z-index: 999;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 0;
  background: white;
  box-shadow: 1px 1px 6px #d0d0d0;
}

.left-paddle {
  left: -24px;
  top: 92px;
  z-index: 9999;
  position: absolute;
  color: #e21b22;
  font-size: 20px;
  text-align: center;
}

.right-paddle {
  right: -24px;
  top: 92px;
  z-index: 9999;
  position: absolute;
  color: #e21b22;
  font-size: 20px;
  text-align: center;
}

.paddles .fas {
  margin: 0;
}

.hidden {
  display: none;
}

.container-menu {
  display: inline-block;
  width: 209px;
  margin-right: 11.7px;
  box-shadow: 0 0 10px #d4d4d4;
  border: 1px solid #E6E6E6;
  overflow: hidden;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  background: #FFF;
}

.menu-body {
  float: left;
  text-align: left;
}

.item-image {
  float: left;
}

.item-image img {
  width: 100%;
  float: left;
}

.item-info {
  float: left;
  padding: 10px 22px 15px;
  color: #737373;
  font-weight: 500;
}

.item-name h1 {
  margin: 0;
  padding: 0 0 6px;
  font-size: 15px;
  -webkit-line-clamp: 2;
  -moz-line-clamp: 2;
  -ms-line-clamp: 2;
  display: -webkit-box!important;
  -o-line-clamp: 2;
  -moz-box-orient: vertical;
  -ms-box-orient: vertical;
  -o-box-orient: vertical;
  box-orient: vertical;
  line-clamp: 2;
  white-space: normal;
  height: 40px;
  min-height: 40px;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 23px;
  font-weight: 500;
}

.item-description {
  margin: 8px 0;
  border-top: 1px solid #E6E6E6;
  font-weight: normal;
}

#ml-1 p {
  color: #717070;
  text-shadow: none;
}

.item-checkout {
  margin-bottom: 15px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
}

.item-checkout i {
  color: #f4c150;
  font-size: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fontawesome-iconpicker/3.2.0/js/fontawesome-iconpicker.min.js"></script>

<div class='programacao-category'>
  <h3><i class='fas fa-laptop-code' /> Programação</h3>
  <div class='menu-wrapper'>
    <ul class='menu'>
      <li class='container-menu'>
        <div class='menu-body'>
          <div class='item-image'>
            <img src='https://udemy-images.udemy.com/course/240x135/849470_788a_2.jpg' />
          </div>
          <div class='item-info'>
            <div class='item-name'>
              <h1>Curso de Língua Inglêsa: AgoraEuFalo - English Club</h1>
            </div>
            <div class='item-description'>
              <p>por AmoCursos</p>
            </div>
            <div class='item-checkout'>
              <i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' />5,0 (479)
            </div>
            <div class='item-price'>R$ 235,90</div>
          </div>
        </div>
      </li>
      <li class='container-menu'>
        <div class='menu-block'>
          <div class='menu-body'>
            <div class='item-image'>
              <img src='https://udemy-images.udemy.com/course/240x135/1383810_0c42.jpg' />
            </div>
            <div class='item-info'>
              <div class='item-name'>
                <h1>Curso de Língua Espanhola: Espanhol do Juan</h1>
              </div>
              <div class='item-description'>
                <p>por AmoCursos</p>
              </div>
              <div class='item-checkout'>
                <i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star-half-alt' />4,5 (214)
              </div>
              <div class='item-price'>R$ 55,90</div>
            </div>
          </div>
        </div>
      </li>
      <li class='container-menu'>
        <div class='menu-block'>
          <div class='menu-body'>
            <div class='item-image'>
              <img src='https://udemy-images.udemy.com/course/240x135/566284_7465_2.jpg' />
            </div>
            <div class='item-info'>
              <div class='item-name'>
                <h1>Curso de Língua Italiana: Gente Italiana</h1>
              </div>
              <div class='item-description'>
                <p>por AmoCursos</p>
              </div>
              <div class='item-checkout'>
                <i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='far fa-star' /><i class='far fa-star' /> 3,0 (479)
              </div>
              <div class='item-price'>R$ 119,50</div>
            </div>
          </div>
        </div>
      </li>
      <li class='container-menu'>
        <div class='menu-body'>
          <div class='item-image'>
            <img src='https://udemy-images.udemy.com/course/240x135/1292876_f2f6_23.jpg' />
          </div>
          <div class='item-info'>
            <div class='item-name'>
              <h1>Curso de Microsoft Excel: Do Básico ao Intermediário</h1>
            </div>
            <div class='item-description'>
              <p>por AmoCursos</p>
            </div>
            <div class='item-checkout'>
              <i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' />5,0 (479)
            </div>
            <div class='item-price'>R$ 499,90</div>
          </div>
        </div>
      </li>
      <li class='container-menu'>
        <div class='menu-body'>
          <div class='item-image'>
            <img src='https://udemy-images.udemy.com/course/240x135/1654366_a64e.jpg' />
          </div>
          <div class='item-info'>
            <div class='item-name'>
              <h1>Curso de Adobe Photoshop</h1>
            </div>
            <div class='item-description'>
              <p>por AmoCursos</p>
            </div>
            <div class='item-checkout'>
              <i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' />5,0 (479)
            </div>
            <div class='item-price'>R$ 25,90</div>
          </div>
        </div>
      </li>
      <li class='container-menu'>
        <div class='menu-body'>
          <div class='item-image'>
            <img src='https://lh6.googleusercontent.com/proxy/zYkKv6L5PN7vtHubvW8gYqJKgq-2nv72oaznwz5iKBl__JlOljFqKQvkovjy--pt3A5Ofprc_EG_XmTRweicbu9ePEecvyTSWjgA2n1htnc0F6VaGskAPOqbDtsT9vk7UPw5tC0=s0-d' />
          </div>
          <div class='item-info'>
            <div class='item-name'>
              <h1>Curso de Violão - Você Pode Tocar</h1>
            </div>
            <div class='item-description'>
              <p>por AmoCursos</p>
            </div>
            <div class='item-checkout'>
              <i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' />5,0 (479)
            </div>
            <div class='item-price'>R$ 195,90</div>
          </div>
        </div>
      </li>
      <li class='container-menu'>
        <div class='menu-body'>
          <div class='item-image'>
            <img src='https://lh3.googleusercontent.com/proxy/WBaYqULb8NJoyKd30phU3dHnC1o6iJ5eNe7T98u1PPxBE616yhfbHy6aR1Ao6cI2UphnprtvrujpSGFdAfmBUvM4K1h-E-9y-3DlKGjnmIweFM1SJmJD4MAIEALmUe3CT58NiUvTmA=s0-d' />
          </div>
          <div class='item-info'>
            <div class='item-name'>
              <h1>Curso de Desenho Realista com Alexandre Porto</h1>
            </div>
            <div class='item-description'>
              <p>por AmoCursos</p>
            </div>
            <div class='item-checkout'>
              <i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' />5,0 (479)
            </div>
            <div class='item-price'>R$ 510,50</div>
          </div>
        </div>
      </li>
    </ul>
    <div class='paddles'>
      <button class='left-paddle paddle hidden'><i class='fas fa-chevron-left'/></button>
      <button class='right-paddle paddle'><i class='fas fa-chevron-right'/></button>
    </div>
  </div>
</div>

View on CodePen

Answer 1

我建议使用定义的itemSize变量来衡量滑块的移动量。由于itemSize是一项的宽度，因此滑块将滚动该数量。

scrollLeft: '+=' + itemSize
scrollLeft: '-=' + itemSize

此外，我更新了显示/隐藏箭头的逻辑。在您的代码中，即使menuPosition < menuEndOffset，“下一个”箭头仍处于隐藏状态。我改变了。

... else if (menuPosition < menuEndOffset) {
  // show both paddles in the middle
  $(leftPaddle).removeClass('hidden');
  $(rightPaddle).removeClass('hidden');
} ...

这是一个可行的示例：

// duration of scroll animation
var scrollDuration = 300;
// paddles
var leftPaddle = document.getElementsByClassName('left-paddle');
var rightPaddle = document.getElementsByClassName('right-paddle');
// get items dimensions
var itemsLength = $('.container-menu').length;
var itemSize = $('.container-menu').outerWidth(true);
// get some relevant size for the paddle triggering point
var paddleMargin = 20;

// get wrapper width
var getMenuWrapperSize = function() {
  return $('.menu-wrapper').outerWidth();
}
var menuWrapperSize = getMenuWrapperSize();
// the wrapper is responsive
$(window).on('resize', function() {
  menuWrapperSize = getMenuWrapperSize();
});
// size of the visible part of the menu is equal as the wrapper size 
var menuVisibleSize = menuWrapperSize;

// get total width of all menu items
var getMenuSize = function() {
  return itemsLength * itemSize;
};
var menuSize = getMenuSize();
// get how much of menu is invisible
var menuInvisibleSize = menuSize - menuWrapperSize;

// get how much have we scrolled to the left
var getMenuPosition = function() {
  return $('.menu').scrollLeft();
};

// finally, what happens when we are actually scrolling the menu
$('.menu').on('scroll', function() {

  // get how much of menu is invisible
  menuInvisibleSize = menuSize - menuWrapperSize;
  // get how much have we scrolled so far
  var menuPosition = getMenuPosition();

  var menuEndOffset = menuInvisibleSize - paddleMargin;

  // show & hide the paddles 
  // depending on scroll position
  if (menuPosition <= paddleMargin) {
    $(leftPaddle).addClass('hidden');
    $(rightPaddle).removeClass('hidden');
  } else if (menuPosition < menuEndOffset) {
    // show both paddles in the middle
    $(leftPaddle).removeClass('hidden');
    $(rightPaddle).removeClass('hidden');
  } else if (menuPosition >= menuEndOffset) {
    $(leftPaddle).removeClass('hidden');
    $(rightPaddle).addClass('hidden');
  }
});

// scroll to left
$(rightPaddle).on('click', function() {
  $('.menu').animate({
    scrollLeft: '+=' + itemSize
  }, 600);
});

// scroll to right
$(leftPaddle).on('click', function() {
  $('.menu').animate({
    scrollLeft: '-=' + itemSize
  }, 600);
});

body {
  margin:0;
}

.menu-wrapper {
  position: relative;
  max-width: 1119px;
  height: 100%;
  margin: 0;
}

.menu {
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.paddle {
  position: absolute;
  top: 0;
  bottom: 0;
  cursor: pointer;
  z-index: 999;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 0;
  background: white;
  box-shadow: 1px 1px 6px #d0d0d0;
}

.left-paddle {
  left: -24px;
  top: 92px;
  z-index: 9999;
  position: absolute;
  color: #e21b22;
  font-size: 20px;
  text-align: center;
}

.right-paddle {
  right: -24px;
  top: 92px;
  z-index: 9999;
  position: absolute;
  color: #e21b22;
  font-size: 20px;
  text-align: center;
}

.paddles .fas {
  margin: 0;
}

.hidden {
  display: none;
}

.container-menu {
  display: inline-block;
  width: 209px;
  margin-right: 11.7px;
  box-shadow: 0 0 10px #d4d4d4;
  border: 1px solid #E6E6E6;
  overflow: hidden;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  background: #FFF;
}

.menu-body {
  float: left;
  text-align: left;
}

.item-image {
  float: left;
}

.item-image img {
  width: 100%;
  float: left;
}

.item-info {
  float: left;
  padding: 10px 22px 15px;
  color: #737373;
  font-weight: 500;
}

.item-name h1 {
  margin: 0;
  padding: 0 0 6px;
  font-size: 15px;
  -webkit-line-clamp: 2;
  -moz-line-clamp: 2;
  -ms-line-clamp: 2;
  display: -webkit-box!important;
  -o-line-clamp: 2;
  -moz-box-orient: vertical;
  -ms-box-orient: vertical;
  -o-box-orient: vertical;
  box-orient: vertical;
  line-clamp: 2;
  white-space: normal;
  height: 40px;
  min-height: 40px;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 23px;
  font-weight: 500;
}

.item-description {
  margin: 8px 0;
  border-top: 1px solid #E6E6E6;
  font-weight: normal;
}

#ml-1 p {
  color: #717070;
  text-shadow: none;
}

.item-checkout {
  margin-bottom: 15px;
  font-size: 13px;
  font-family: Roboto;
  font-weight: 400;
}

.item-checkout i {
  color: #f4c150;
  font-size: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fontawesome-iconpicker/3.2.0/js/fontawesome-iconpicker.min.js"></script>

<div class='programacao-category'>
  <h3><i class='fas fa-laptop-code' /> Programação</h3>
  <div class='menu-wrapper'>
    <ul class='menu'>
      <li class='container-menu'>
        <div class='menu-body'>
          <div class='item-image'>
            <img src='https://udemy-images.udemy.com/course/240x135/849470_788a_2.jpg' />
          </div>
          <div class='item-info'>
            <div class='item-name'>
              <h1>Curso de Língua Inglêsa: AgoraEuFalo - English Club</h1>
            </div>
            <div class='item-description'>
              <p>por AmoCursos</p>
            </div>
            <div class='item-checkout'>
              <i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' />5,0 (479)
            </div>
            <div class='item-price'>R$ 235,90</div>
          </div>
        </div>
      </li>
      <li class='container-menu'>
        <div class='menu-block'>
          <div class='menu-body'>
            <div class='item-image'>
              <img src='https://udemy-images.udemy.com/course/240x135/1383810_0c42.jpg' />
            </div>
            <div class='item-info'>
              <div class='item-name'>
                <h1>Curso de Língua Espanhola: Espanhol do Juan</h1>
              </div>
              <div class='item-description'>
                <p>por AmoCursos</p>
              </div>
              <div class='item-checkout'>
                <i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star-half-alt' />4,5 (214)
              </div>
              <div class='item-price'>R$ 55,90</div>
            </div>
          </div>
        </div>
      </li>
      <li class='container-menu'>
        <div class='menu-block'>
          <div class='menu-body'>
            <div class='item-image'>
              <img src='https://udemy-images.udemy.com/course/240x135/566284_7465_2.jpg' />
            </div>
            <div class='item-info'>
              <div class='item-name'>
                <h1>Curso de Língua Italiana: Gente Italiana</h1>
              </div>
              <div class='item-description'>
                <p>por AmoCursos</p>
              </div>
              <div class='item-checkout'>
                <i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='far fa-star' /><i class='far fa-star' /> 3,0 (479)
              </div>
              <div class='item-price'>R$ 119,50</div>
            </div>
          </div>
        </div>
      </li>
      <li class='container-menu'>
        <div class='menu-body'>
          <div class='item-image'>
            <img src='https://udemy-images.udemy.com/course/240x135/1292876_f2f6_23.jpg' />
          </div>
          <div class='item-info'>
            <div class='item-name'>
              <h1>Curso de Microsoft Excel: Do Básico ao Intermediário</h1>
            </div>
            <div class='item-description'>
              <p>por AmoCursos</p>
            </div>
            <div class='item-checkout'>
              <i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' />5,0 (479)
            </div>
            <div class='item-price'>R$ 499,90</div>
          </div>
        </div>
      </li>
      <li class='container-menu'>
        <div class='menu-body'>
          <div class='item-image'>
            <img src='https://udemy-images.udemy.com/course/240x135/1654366_a64e.jpg' />
          </div>
          <div class='item-info'>
            <div class='item-name'>
              <h1>Curso de Adobe Photoshop</h1>
            </div>
            <div class='item-description'>
              <p>por AmoCursos</p>
            </div>
            <div class='item-checkout'>
              <i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' />5,0 (479)
            </div>
            <div class='item-price'>R$ 25,90</div>
          </div>
        </div>
      </li>
      <li class='container-menu'>
        <div class='menu-body'>
          <div class='item-image'>
            <img src='https://lh6.googleusercontent.com/proxy/zYkKv6L5PN7vtHubvW8gYqJKgq-2nv72oaznwz5iKBl__JlOljFqKQvkovjy--pt3A5Ofprc_EG_XmTRweicbu9ePEecvyTSWjgA2n1htnc0F6VaGskAPOqbDtsT9vk7UPw5tC0=s0-d' />
          </div>
          <div class='item-info'>
            <div class='item-name'>
              <h1>Curso de Violão - Você Pode Tocar</h1>
            </div>
            <div class='item-description'>
              <p>por AmoCursos</p>
            </div>
            <div class='item-checkout'>
              <i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' />5,0 (479)
            </div>
            <div class='item-price'>R$ 195,90</div>
          </div>
        </div>
      </li>
      <li class='container-menu'>
        <div class='menu-body'>
          <div class='item-image'>
            <img src='https://lh3.googleusercontent.com/proxy/WBaYqULb8NJoyKd30phU3dHnC1o6iJ5eNe7T98u1PPxBE616yhfbHy6aR1Ao6cI2UphnprtvrujpSGFdAfmBUvM4K1h-E-9y-3DlKGjnmIweFM1SJmJD4MAIEALmUe3CT58NiUvTmA=s0-d' />
          </div>
          <div class='item-info'>
            <div class='item-name'>
              <h1>Curso de Desenho Realista com Alexandre Porto</h1>
            </div>
            <div class='item-description'>
              <p>por AmoCursos</p>
            </div>
            <div class='item-checkout'>
              <i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' /><i class='fas fa-star' />5,0 (479)
            </div>
            <div class='item-price'>R$ 510,50</div>
          </div>
        </div>
      </li>
    </ul>
    <div class='paddles'>
      <button class='left-paddle paddle hidden'><i class='fas fa-chevron-left'/></button>
      <button class='right-paddle paddle'><i class='fas fa-chevron-right'/></button>
    </div>
  </div>
</div>