如何通过div的循环使用左/右

的jsfiddle：https://jsfiddle.net/d34pksmn/1/如何通过div的循环使用左/右

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，如果左键单击，则向左滑动，如果右键单击，则向右滑动。

我想在不使用任何插件的情况下实现图像传送带。

来源

2016-06-09 Si8

我不是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/

来源

2016-06-09 19:14:35 DGaffneyDC

真棒！谢谢。唯一的问题是，每个之间的距离正在消失？ – Si8

也许你可以帮助我吗？ http://stackoverflow.com/questions/37748960/how-to-make-a-certain-div-first-child-and-anything-before-it-append-to-the-end谢谢。 – Si8

如何通过div的循环使用左/右

回答

相关问题