0

次のコードがあります。

$(document).ready(function(){
    $('.porslider > .slides > li > div > ul > li').click(function() {
        var which = $(this).index();
        $('#big').find('div').hide().eq(which).show();
    });
});

アイテムをクリックすると、div が表示されます。これは機能しています。しかし、これをフレックススライダーに入れたときではありません。私のHTMLは次のようになります。

<div class="flexslider porslider">
    <ul class="slides">
        <li>
            <div>
                <ul class="porimages ulpor">
                    <li><a><img src="por_small/piWD00001.png" alt="" height="142" width="142"/></a></li>
                    <li class="mr"><a><img src="por_small/piWD00001.png" alt="" height="142" width="142"/></a></li>
                    <li><a><img src="por_small/piWD00001.png" alt="" height="142" width="142"/></a></li>
                    <li class="mr"><a><img src="por_small/piWD00001.png" alt="" height="142" width="142"/></a></li>
                    <li><a><img src="por_small/piWD00001.png" alt="" height="142" width="142"/></a></li>
                </ul>
            </div>                
        </li>
        <li>
            <div>
                <ul class="porimages ulpor">
                    <li><a><img src="por_small/piWD00001.png" alt="" height="142" width="142"/></a></li>
                    <li class="mr"><a><img src="por_small/piWD00001.png" alt="" height="142" width="142"/></a></li>
                    <li><a><img src="por_small/piWD00001.png" alt="" height="142" width="142"/></a></li>
                    <li class="mr"><a><img src="por_small/piWD00001.png" alt="" height="142" width="142"/></a></li>
                    <li><a><img src="por_small/piWD00001.png" alt="" height="142" width="142"/></a></li>
                </ul>
            </div>                
        </li>
    </ul>
</div>

<div id="big">
    <div><img src="por_big/piWD00001.png" /></div>
    <div><img style="opacity: 0.5;" src="por_big/piWD00001.png" /></div>
    <div><img style="border: 2px solid red;" src="por_big/piWD00001.png" /></div>
    <div><img src="por_big/piWD00001.png" /></div>
    <div><img src="por_big/piWD00001.png" /></div>
    <div><img src="por_big/piWD00001.png" /></div>
    <div><img style="opacity: 0.1;" src="por_big/piWD00001.png" /></div>
    <div><img style="border: 2px solid blue;" src="por_big/piWD00001.png" /></div>
    <div><img src="por_big/piWD00001.png" /></div>
    <div><img src="por_big/piWD00001.png" /></div>
</div>

私のCSSは次のようになります。

#big div {
display: none;
}

彼が 2 枚目のスライドも見られるようにする簡単な方法はありますか? 現在、彼には最初の 5 つのサムネイルしか表示されていませんが、私が欲しいのはもっと多くのスライドです。したがって、人々が 2 番目のスライドに移動すると、同じ画像がより大きく表示されます。このスクリプトを他のスライドで使用するにはどうすればよいですか?

ありがとう！

4

1 に答える 1

0

http://jsfiddle.net/4KhUb/4/

これを開始してみて、うまくいくかどうかを確認してください... Flexslider は HTML に何かをラップして、(醜い) セレクターを機能させないと思います。

$('.porimages > li').click(function() {
    var which = $(this).index();
    $('#big').find('div').hide().eq(which).show();
});

また

$('.porslider li li').click(function() {
    var which = $(this).index();
    $('#big').find('div').hide().eq(which).show();
});
于 2013-10-09T16:35:01.843 に答える