如何通過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的循環使用左/右

回答

相關問題