在jQuery中,設置圖片左右按鈕功能可以輕松實現圖片的自動播放功能,下面我們一起看看如何進行設置。
$(".img-container").hover(function(){ $(".prev").show(); $(".next").show(); },function(){ $(".prev").hide(); $(".next").hide(); }); $(".prev").click(function(){ prevImage(); }); $(".next").click(function(){ nextImage(); }); var index=0; var timer=null; var len=$(".img-container li").length; function nextImage(){ index++; if(index==len){ index=0; } changeImage(index); } function prevImage(){ index--; if(index==-1){ index=len-1; } changeImage(index); } function changeImage(index){ $(".img-container li").eq(index).fadeIn(300).siblings().fadeOut(300); }
首先,我們使用hover方法來實現當鼠標進入圖片容器時,左右按鈕的顯示和隱藏。然后,我們為左右按鈕分別綁定了click事件,來實現圖片的切換功能。在點擊事件中,我們通過調用changeImage函數來實現圖片的淡入淡出效果。在changeImage函數中,我們使用了eq和siblings方法,分別獲取當前圖片和其余所有圖片,并設置淡入淡出效果。
此外,我們還定義了一個index變量,來記錄當前顯示的圖片編號。當點擊左右按鈕時,index變量會自增或自減,從而實現圖片的切換功能。我們還設置了一個定時器,來實現自動播放功能,當鼠標進入圖片容器時,自動播放功能會暫停。
通過以上代碼,我們可以輕松實現圖片左右按鈕的功能,讓圖片變得更加生動有趣。