jQuery是一款廣泛使用的JavaScript庫(kù),提供了很多方便的操作界面的工具。其中,走馬燈效果是一種經(jīng)常使用的動(dòng)畫效果,這種效果通常是左右移動(dòng)一段內(nèi)容的呈現(xiàn)方式。在jQuery中,實(shí)現(xiàn)左右移動(dòng)的走馬燈效果相對(duì)簡(jiǎn)單,下面是一段基本的實(shí)現(xiàn)代碼:
$(document).ready(function(){ var wd = $('.wrapper').width(); var num = $('.item').length; var i = 0; $('.container').width(wd*num); function moveLeft(){ i--; if(i==-1){ i = num-1; } $('.container').stop().animate({left:-i*wd},'slow'); } function moveRight(){ i++; if(i==num){ i = 0; } $('.container').stop().animate({left:-i*wd},'slow'); } $('.btn-prev').click(function(){ moveLeft(); }); $('.btn-next').click(function(){ moveRight(); }); });
以上代碼實(shí)現(xiàn)了一個(gè)基本的左右移動(dòng)的走馬燈效果。其中,moveLeft()
和moveRight()
函數(shù)負(fù)責(zé)實(shí)現(xiàn)內(nèi)容區(qū)域的左右平移,$('.btn-prev').click()
和$('.btn-next').click()
函數(shù)用于監(jiān)聽(tīng)左右方向鍵的點(diǎn)擊事件。
由于走馬燈效果實(shí)現(xiàn)的靈活性,在實(shí)際項(xiàng)目中我們還可以加入自動(dòng)滾動(dòng)、hover暫停等功能。同時(shí),使用jQuery實(shí)現(xiàn)左右移動(dòng)的走馬燈效果相對(duì)簡(jiǎn)單,適用于各類網(wǎng)站的首頁(yè)焦點(diǎn)圖、產(chǎn)品展示等等場(chǎng)景。