最近在前端項(xiàng)目開發(fā)中，遇到一個(gè)需要實(shí)現(xiàn)放大當(dāng)前輪播圖效果的需求。研究了一下，發(fā)現(xiàn)通過使用jQuery實(shí)現(xiàn)輪播圖放大效果十分簡單易懂。

如下是實(shí)現(xiàn)代碼：

var $sliderImg = $('.slider img');
$sliderImg.eq(0).addClass('active');
$sliderImg.click(function() {
var $this = $(this),
index = $this.index(),
i = index - 1;
if(!$this.hasClass('active')){
$('.slider img.active').removeClass('active');
$this.addClass('active').animate({height:330,width:550,left:'20px'},500);
$sliderImg.show().not('.active').animate({height:160,width:280,left:(index>i)?'680px':'-330px'},500);
}
});

通過添加點(diǎn)擊事件，判斷輪播圖的當(dāng)前索引，并通過添加、刪除active類名實(shí)現(xiàn)放大當(dāng)前輪播圖的效果。

在CSS中，需要設(shè)置默認(rèn)輪播圖高度寬度及定位，并設(shè)立active類名樣式：

.slider img {
position: absolute;
top: 50px;
left: -165px;
height: 160px;
width: 280px;
transition: all 0.5s ease-in-out;
cursor: pointer;
z-index: -1;
}
.slider img.active {
z-index: 1;
height: 330px;
width: 550px;
left: 20px;
top: 10px;
}

通過CSS的transition屬性，可以添加輪播圖變化的動(dòng)畫效果。

以上便是實(shí)現(xiàn)jQuery輪播圖放大效果的簡單代碼。希望對(duì)大家有所幫助！