今天我們來講一下jquery輪播圖中的縮略圖的實(shí)現(xiàn)。
一般來說，輪播圖會(huì)在下面添加一個(gè)縮略圖的區(qū)域，方便用戶可以直接點(diǎn)擊縮略圖切換到對(duì)應(yīng)的圖片。
首先，我們需要在html中添加一個(gè)存放縮略圖的div，并且為每一個(gè)縮略圖添加一個(gè)data-index屬性，表示該縮略圖對(duì)應(yīng)的圖片的索引位置。

<div class="thumbnail">
<img src="img/1_thumb.jpg" data-index="0">
<img src="img/2_thumb.jpg" data-index="1">
<img src="img/3_thumb.jpg" data-index="2">
<img src="img/4_thumb.jpg" data-index="3">
</div>

接下來，在jquery中監(jiān)聽縮略圖的點(diǎn)擊事件，獲取對(duì)應(yīng)的索引位置，并且切換到對(duì)應(yīng)的圖片。

$('.thumbnail img').click(function(){
var index = $(this).data('index');
$('.slider li').eq(index).fadeIn().siblings().fadeOut();
});

其中，.slider li表示輪播圖中的每一張圖片，eq(index)表示選擇對(duì)應(yīng)索引位置的圖片，并且使用fadeIn()和fadeOut()方法實(shí)現(xiàn)漸入漸出的效果。
至此，我們成功實(shí)現(xiàn)了jquery輪播圖中的縮略圖。希望對(duì)大家有所幫助。