在使用jQuery實(shí)現(xiàn)輪播圖時(shí)，為了方便用戶可以點(diǎn)擊圖片進(jìn)行跳轉(zhuǎn)，我們需要給圖片加上鏈接。下面介紹兩種實(shí)現(xiàn)方式：

方式一：

<div id="carousel">
<img src="image1.jpg" data-link="http://www.example.com/page1">
<img src="image2.jpg" data-link="http://www.example.com/page2">
<img src="image3.jpg" data-link="http://www.example.com/page3">
</div>

使用data屬性來存儲鏈接地址，然后在輪播圖切換時(shí)，將鏈接地址賦給相應(yīng)的圖片。代碼如下：

var carousel = $('#carousel');
var imgs = carousel.find('img');
var links = imgs.map(function(){
return $(this).data('link');
}).get();
carousel.carouFredSel({
items: 1,
circular: true,
infinite: true,
auto: false,
prev: '#prev',
next: '#next',
pagination: {
container: '#pager'
},
onCreate: function(){
imgs.each(function(i){
$(this).attr('href', links[i]);
});
},
onBefore: function(oldItem, newItem){
$(imgs[oldItem]).removeAttr('href');
$(imgs[newItem]).attr('href', links[newItem]);
}
});

方式二：

<div id="carousel">
<a ><img src="image1.jpg"></a>
<a ><img src="image2.jpg"></a>
<a ><img src="image3.jpg"></a>
</div>

將圖片包裹在鏈接標(biāo)簽中，點(diǎn)擊圖片時(shí)就會跳轉(zhuǎn)到相應(yīng)的鏈接地址。代碼如下：

var carousel = $('#carousel');
carousel.carouFredSel({
items: 1,
circular: true,
infinite: true,
auto: false,
prev: '#prev',
next: '#next',
pagination: {
container: '#pager'
}
});

兩種方式各有優(yōu)缺點(diǎn)，可以根據(jù)實(shí)際需求選擇合適的方式。