在網(wǎng)頁中，輪播圖已經(jīng)成為了吸引用戶眼球的一種重要方式，而小圈的添加可以幫助用戶更好地了解輪播圖的狀態(tài)。在 jQuery 中，我們可以使用事件委托的方式來綁定這種小圈。

首先，我們需要在 HTML 代碼中添加小圈的容器，例如：

<div class="dots"></div>

然后在 JavaScript 中，我們可以使用以下代碼來生成小圓點(diǎn)：

var dots = $('.dots');
for (var i = 0; i < slideCount; i++) {
$('<span />', {
class: 'dot',
data: {slideIndex: i}
}).appendTo(dots);
}

這里的slideCount可以根據(jù)輪播圖的實(shí)際圖片數(shù)量來設(shè)置。這段代碼會(huì)在dots容器中生成對應(yīng)數(shù)量的小圓點(diǎn)，并為每個(gè)小圓點(diǎn)添加了自定義屬性data-slide-index，值為對應(yīng)的圖片序號(hào)。

接著，我們可以在輪播圖的切換事件中，判斷當(dāng)前圖片序號(hào)，并為對應(yīng)的小圓點(diǎn)添加一個(gè)選中狀態(tài)，代碼如下：

$('.carousel').on('afterChange', function(event, slick, currentSlide, nextSlide){
var dots = $(this).siblings('.dots').find('.dot');
dots.removeClass('active');
dots.eq(currentSlide).addClass('active');
});

這里的.carousel是輪播圖的容器，我們通過siblings()方法來找到它的兄弟元素.dots，然后在其中找到所有的小圓點(diǎn).dot。接著我們先把所有小圓點(diǎn)的選中狀態(tài)移除，然后為當(dāng)前圖片序號(hào)對應(yīng)的小圓點(diǎn)添加選中狀態(tài).active。

最后，我們還需要為小圓點(diǎn)綁定相應(yīng)的事件，使用戶可以通過點(diǎn)擊小圓點(diǎn)來切換輪播圖?？梢允褂靡韵麓a實(shí)現(xiàn)：

$('.dots').on('click', '.dot', function(){
var slideIndex = $(this).data('slide-index');
$('.carousel').slick('slickGoTo', slideIndex);
});

這里的$('.carousel').slick('slickGoTo', slideIndex)方法會(huì)將輪播圖切換到對應(yīng)的圖片。