尝试编写一个简单的轮播

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 定位在父容器中，然后将该容器向左或向右移动 140 像素（或其他）？

这是一个小提琴
https://jsfiddle.net/L1v2uyxd/

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

Answer 1

在开始之前，请考虑以下几点：

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

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

• 在较大的屏幕上，您要决定轮播是装箱还是全宽。我个人觉得全幅更自然，但有些人更喜欢盒装。我在这里填满了。

• 决定是否需要有限或无限滑块。我假设它是一个looper。如果您不想这样，只需删除在幻灯片上附加/前置项目的js。

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

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

/* 
 * 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>

在此之后，您还需要做一些事情：

• 自适应高度
• 点控件
• 转到幻灯片
• 触摸事件和行为
• 响应速度更快（适当）
• 取消注册事件/行为（您可能希望删除移动设备上的所有事件/行为，只在一张下方显示所有幻灯片） - 如果您希望能够重新初始化，取消注册很重要。李>
• 有不止一张活动幻灯片
• 实施步骤（一次滑动多个项目）
• 启用滑动（和粘性）
• 缩放到全屏
• 在屏幕小于幻灯片的设备上通过平移单个幻灯片放大全尺寸（电子商务产品滑块有时需要此功能）

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