-6

目標: carouFredSel を使用してスライダーを作成し、これと同じ動作をするhttp://www.gcmingati.net/wordpress/wp-content/lab/jquery/svwt/index.html

説明:メイン画像の下に 5 つのサムネイルがあります。スライドは最初のサムネイルから開始し、しばらくしてから次のサムネイルを選択する必要があります。5 番目のサムネイルに到達すると、次の 5 つのサムネイルに自動的にスクロールする必要があります。ユーザーがスライダー領域全体にカーソルを合わせると、すべてのアニメーションが停止する必要があります。

HTML:

<div style="width: 600px;">
<div id="slides-images">
    <img src="http://placehold.it/600x300"/>
    <img src="http://placehold.it/600x300"/>
    <img src="http://placehold.it/600x300"/>
    <img src="http://placehold.it/600x300"/>
    <img src="http://placehold.it/600x300"/>
    <img src="http://placehold.it/600x300"/>
    <img src="http://placehold.it/600x300"/>
    <img src="http://placehold.it/600x300"/>
    <img src="http://placehold.it/600x300"/>
    <img src="http://placehold.it/600x300"/>
</div>
<div id="slides-thumbs" class="clearfix">
    <div><img src="http://placehold.it/110x80" /></div>
    <div><img src="http://placehold.it/110x80" /></div>
    <div><img src="http://placehold.it/110x80" /></div>
    <div><img src="http://placehold.it/110x80" /></div>
    <div><img src="http://placehold.it/110x80" /></div>
    <div><img src="http://placehold.it/110x80" /></div>
    <div><img src="http://placehold.it/110x80" /></div>
    <div><img src="http://placehold.it/110x80" /></div>
    <div><img src="http://placehold.it/110x80" /></div>
    <div><img src="http://placehold.it/110x80" /></div>
</div>
<a id="prev" href="#">Prev</a>
<a id="next" href="#">Next</a>
</div>

JSFIDDLE: http://jsfiddle.net/hfMmk/1/

4

1 に答える 1

4

この要件で carouFredSel を使用して画像スライダーを構築しますか?

いいえ。

于 2013-02-10T15:54:08.993 に答える