-1

デモ

私は次のhtmlを持っています....

<div id="banner">
    <img class="img1" src="" />
    <img class="img2" src="" />
    <img class="img3" src="" />
    <img class="img4" src="" />
</div>
<ul>
    <li class='li1'>one</li>
    <li class='li2'>two</li>
    <li class='li3'>three</li>
    <li class='li4'>four</li>
</ul>

.li3（3）をクリックすると、前の画像.img1, .img2が最後に移動する必要があります。つまり、ここから.img4. 出力は次のようになります。

<div id="banner">         
        <img class="img3" src="" />
        <img class="img4" src="" />
        <img class="img1" src="" />
        <img class="img2" src="" />
</div>

どうすればこれを行うことができるのか、これについてはまったくわかりません。

アップデート

次の提供された回答から少し問題があります。プラグインを使用しているため、コードを使用すると画像がスライドし、次のようなものをクリックすると画像が繰り返し追加されます。

<div id="banner">         
            <img class="img3" src="" />
            <img class="img4" src="" />
            <img class="img1" src="" />
            <img class="img2" src="" />
            <img class="img2" src="" />
            <img class="img1" src="" />
            <img class="img2" src="" />
            <img class="img3" src="" />
    </div>

どうすれば以前のものを削除できますか?

4

2 に答える 2

3

試す

var $b = $('#banner');
$('ul li').click(function(){
    var idx = $(this).index();
    $b.find('img:lt(' + idx + ')').appendTo($b)
});

デモ:フィドル

于 2013-09-11T03:34:37.733 に答える
1

次のようなことができます。

$('.li').click(function(){
    var index = $(this).index(), //get the index of the clicked li.
              $banner = $('#banner');
    $banner.find(".img:gt(" + (index-1) + ")").prependTo($banner); //get all the img greater than its index -1 and prepend it to the parent will reposition them.
 });

フィドル

選択を容易にするために、li と imgs に共通のクラスを指定しました。

于 2013-09-11T03:34:33.347 に答える