如何使用左/右循环遍历 div

Question

JSFiddle：https://jsfiddle.net/d34pksmn/1/

HTML：

<div style="overflow: hidden; width: 100%; position: relative; height: 165px; background: #00AC00;">
  <div class="dvSli" style="width: 100%; height: 100%; overflow: hidden; position: absolute; z-index: 4;">
  </div>
  <div style="overflow: visible; position: absolute; left: 2%; top: 75px; z-index: 10; padding: 10px;">
    <span id="arrow-left"></span>
  </div>
  <div style="overflow: visible; position: absolute; right: 0; top: 75px; z-index: 10;">
  <span id="arrow-right"></span>
  </div>
  <div style="overflow: hidden; height: 40px; width: 100%; text-align: center;">
    A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
    <!-- Generate a letter for each occurance in `dCon` class DIV -->
  </div>
  <div class="dCon" style="overflow: auto; width: 6000000%; height: 125px;">
    <div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
  ONE
    </div>
    <div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
  TWO
    </div>
    <div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
  THREE
    </div>
    <div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
  FOUR
    </div>
    <div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
  FIVE
    </div>
    <div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
  SIX
    </div>
    <div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
  SEVEN
    </div>
    <div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
  EIGHT
    </div>
    <div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
  NINE
    </div>
    <div style="display: inline-block; width: 115px; height: 125px; background: #FF0000; position: relative; z-index: 3;">
  TEN
    </div>
  </div>
</div>

我该如何修改我的 HTML/CSS/JQuery：

• 单击左/右箭头将在dCon 内滑动每个 DIV 类父 div，如果单击左，则左，如果单击右，则右 点击。

我想在不使用任何插件的情况下实现图像轮播。

Answer 1

我不能 100% 确定您在第 2 部分中的要求，您能说得更具体一点吗？

对于第一部分，这是一个简单的解决方案：

$(function() {
    $("#arrow-left").click(function() {
    $(".dCon div:first-child").appendTo(".dCon");
    $(".dCon").remove(".dCon div:first-child");
  });
  $("#arrow-right").click(function() {
    $(".dCon div:last-child").prependTo(".dCon");
    $(".dCon").remove(".dCon div:last-child");
  });
});

和更新的小提琴：https://jsfiddle.net/JSnoobDC16/d34pksmn/6/