jquery - 尝试编写一个简单的轮播

Question

我正在尝试构建一个简单的轮播，我知道有很多，但我更喜欢尝试找出答案。

这是我的轮播代码

<div class="amnavigation">
<div class="previous"><</div>
    <ul>
        <li>icon</li>
        <li>icon</li>
        <li>icon</li>
        <li>icon</li>
        <li>icon</li>
        <li>icon</li>
        <li>icon</li>
        <li>icon</li>
        <li>icon</li>
        <li>icon</li>
        <li>icon</li>
        <li>icon</li>
        <li>icon</li>
        <li>icon</li>
        <li>icon</li>
        <li>icon</li>
        <li>icon</li>
        <li>icon</li>
        <li>icon</li>
        <li>icon</li>
    </ul>
    <div class="next">></div>

  </div>

和CSS

.amnavigation {
  height: 140px;
  overflow: hidden;
  display: flex;
  height: 140px;
  overflow: hidden;
  display: flex;
  max-width: 1000px;
  margin: auto; }
  .amnavigation ul li {
    width: 140px;
    height: 140px;
    background: #999;
    display: inline-block;
    margin: 5px; }

我什至不知道从哪里开始以及使用什么功能。

我是否会将内部 ul 放置在父容器中，然后将该容器向左或向右移动 140px(或其他值)？

这是一个 fiddle
https://jsfiddle.net/L1v2uyxd/

非常感谢任何建议和耐心，因为我正在努力学习。

Answer 1

开始之前，需要考虑以下几点:

• 告诉浏览器将这些项目设置为无序列表的样式只是为了覆盖这些显示规则是没有意义的。使用<div>愿景和<span> s。甚至自定义元素(没有默认样式!)

• 决定您的轮播是一个合适的 slider 还是只是淡入/淡出项目。因为推子相当简单和直接(您只需设置动画 opacity )，我将假设它是一个 slider 。

• 在较大的屏幕上，您想要决定轮播是加框还是全宽。我个人认为全宽更自然，但有些人更喜欢盒装。我在这里把它填满了。

• 决定您需要有限还是无限 slider 。我假设它是一个looper。如果您不想这样做，只需删除 js在幻灯片上附加/添加项目。

• 决定轨道是否具有可变高度。这很重要，因为您可能希望将其包装在额外高度的占位符中，以便可以分隔动画。当做像 slider 这样复杂的事情时，您希望动画方面尽可能保持整洁和干净。后来它们变得足够复杂。

现在，鉴于上述情况，请从 CSS 开始执行此操作。 。我已经按步骤进行了布局(基本设置、 slider 布局、动画)。 js是在动画步骤中制作的。重点不是为您创建 slider ，而是引导您完成整个过程，以便您有一个示例。

/* 
 * go to CSS first, I'll send you back here when when it's time
 */

$(window).on('load', function(){
  var slides = $('slider slide');
  slides.each(function(){
    // add 'before' and 'after' classes to all and `active` to first
    $(this).addClass( 
      $(this).index() ? (
        $(this).index() > (slides.length / 2) ?'before':'after'
      ) : 'active'
    );
  });
  
  // place all `.before` slides before `.active` in DOM
  $(slides.get().reverse()).each(function(){
    if ($(this).is('.before')) {
      $(this).prependTo($(this).parent());
    }
  });
})

function goNext() {
    active = $('slider .active');
    active.next().addClass('active').removeClass('after');
    active.addClass('before').removeClass('active');
    $('slider slide').first().removeClass('before').appendTo($('slider')).addClass('after')
  }
  function goPrev() {
    active = $('slider .active');
    active.prev().addClass('active').removeClass('before');
    active.addClass('after').removeClass('active');
    $('slider slide').last().removeClass('after').prependTo($('slider')).addClass('before')
 }

body {
  margin: 0;
  text-align: center;
  overflow-x: hidden;
}
[flex] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
* {
  box-sizing: border-box;
}
.content {
  width: 80vw;
  border: 1px solid #aaa;
  text-align: initial;
  margin: 0 auto;
  min-height: 100vh;
}
.header {
  min-height: 4rem;
  text-align: center;
 
}
.rest-of-page {
  padding: 1rem;
}
/* the above is just setup - ignore it 
 * here comes the juice.
 * I used custom html elements so nothing would be default
 * this way I needed to put in all required css attributes
 * not relying on default styles by browser
 */

slider-container {
  border: solid red;
  border-width: 1px 0;
  display: block;
  width: 100vw;
  
  /* left margin equal with half the difference 
   * between .content width and and viewport width:
   */
  left: calc((100% - 100vw) / 2); 
  position: relative;
  overflow: hidden;
  min-height: 300px;
  text-align: center;
}
slide[flex] {
  position: absolute;
  top: 1rem;
  width: 80vw;
  margin: 0 10vw;
  height: calc(100% - 4rem);
  background-color: #777;
  color: white;
  
  /* making sure slides don't render before everything loads */ 
  display: none;
    
  transition: transform .42s cubic-bezier(.4,0,.2,1);
}
slider-container .navigation {
  position: absolute;
  bottom: 0;
  display: flex;
  width: 100%;
  justify-content: center;
}
slider-container .navigation > * {
  width: 2rem;
  height: 2rem;
  border: 1px solid #242424;
  margin: .5rem .25rem;
  cursor: pointer;
}

/* all the layout is set so far - all items in place 
 * now we want to handle slider positions and animations
 * disable the code below to see what we got so far
 * this is where javascript steps in
 */

slider .active,
slider .before,
slider .after {
  display: flex;
}
.before {
  transform: translateX(-100vw);
}
.after {
  transform: translateX(100vw);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class="header" flex>Header here</div>  
  <slider-container>
    <slider>
      <slide flex>icon 1</slide>
      <slide flex>icon 2</slide>
      <slide flex>icon 3</slide>
      <slide flex>icon 4</slide>
      <slide flex>icon 5</slide>
      <slide flex>icon 6</slide>
      <slide flex>icon 7</slide>
      <slide flex>icon 8</slide>
      <slide flex>icon 9</slide>
      <slide flex>icon 10</slide>
      <slide flex>icon 11</slide>
      <slide flex>icon 12</slide>
      <slide flex>icon 13</slide>
      <slide flex>icon 14</slide>
      <slide flex>icon 15</slide>
    </slider>
    <div class="navigation">
      <div class="previous" flex onclick="javascript:goPrev()">&lt;</div>
      <div class="next" flex  onclick="javascript:goNext()">></div>
    </div>
  </slider-container>
  <div class="rest-of-page">Content here</div>  
</div>

在此之后，您还需要一些东西:

• 自适应高度
• 点控件
• 转到幻灯片
• 触摸事件和行为
• 响应速度更快(适当)
• 取消注册事件/行为(您可能希望删除移动设备上的所有事件/行为，只显示所有幻灯片) - 如果您希望能够重新启动，取消注册非常重要。<
• 有不止一张事件幻灯片
• 实现步骤(一次滑动多个项目)
• 启用滑动(和粘性)
• 缩放至全屏
• 在屏幕比幻灯片小的设备上通过在单张幻灯片内平移来放大全尺寸(电子商务产品 slider 有时需要此功能)

我不是说:喜欢我。你应该建立你自己的。但我列出了如何做到这一点，希望它能有所帮助。我想这就是你问的原因。