Light Carousel使用Append＆amp;前置

Question

我试图用jquery制作一个简单的旋转木马，但CSS3做了所有繁重的工作。单击next / prev可使用append / prepend旋转元素。我无法让它工作，我不明白我做错了什么。我的脚本看起来像这样：

$(".next").click(function() {
    $(".item-post:first-of-type").append($(".item-post:last-of-type"));
});
$(".prev").click(function() {
    $(".item-post:last-of-type").prepend($(".item-post:first-of-type"));
});

HTML

<div class="news-layout-1">

  <div class="item-post"><h1 class="item-title">First</h1></div>
  <div class="item-post"><h1 class="item-title">Second</h1></div>
  <div class="item-post"><h1 class="item-title">Third</h1></div>
  <div class="item-post"><h1 class="item-title">Fourth</h1></div>
  <div class="item-post"><h1 class="item-title">Fifth</h1></div>
  <div class="item-post"><h1 class="item-title">Sixth</h1></div>

  <div class="prev"></div>
  <div class="next"></div>

</div>

jsFiddle：http://jsfiddle.net/fkn16sak/3/

Answer 1

我认为你想要insertBefore和insertAfter：

＆＃13;

＆＃13;

$(".next").click(function () {
    $(".item-post:first").insertAfter($(".item-post:last"));
});
$(".prev").click(function () {
    $(".item-post:last").insertBefore($(".item-post:first"));
});

＆＃13;

.news-layout-1 {
    position: relative;
    overflow: auto;
}
h1 {
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: none;
    text-align: center;
}
.item-post {
    width: 20%;
    height: 20%;
    float: left;
    background: #444;
}
.item-post:first-of-type {
    width: 100%;
    height: 180px;
    background: #bbb;
}
.prev, .next {
    width: 20px;
    background: darkred;
    height: 48px;
    z-index: 2;
    cursor: pointer;
    position: absolute;
    bottom: 0;
}
.prev {
    left: 0;
}
.next {
    right: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="news-layout-1">
    <div class="item-post">
        <h1 class="item-title">First</h1>
    </div>
    <div class="item-post">
        <h1 class="item-title">Second</h1>
    </div>
    <div class="item-post">
        <h1 class="item-title">Third</h1>
    </div>
    <div class="item-post">
        <h1 class="item-title">Fourth</h1>
    </div>
    <div class="item-post">
        <h1 class="item-title">Fifth</h1>
    </div>
    <div class="item-post">
        <h1 class="item-title">Sixth</h1>
    </div>
    <div class="prev">p</div>
    <div class="next">n</div>
</div>

＆＃13;

＆＃13;

＆＃13;