使用carouFredSel构建具有此要求的图像滑块?

时间:2013-02-10 15:44:47

标签: jquery slider thumbnails

目标:使用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/

1 个答案:

答案 0 :(得分:4)

  

使用carouFredSel构建具有此要求的图像滑块?

没有

相关问题