色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

jquery設置圖片左右按鈕

楊奕斌1年前6瀏覽0評論

在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變量會自增或自減,從而實現圖片的切換功能。我們還設置了一個定時器,來實現自動播放功能,當鼠標進入圖片容器時,自動播放功能會暫停。

通過以上代碼,我們可以輕松實現圖片左右按鈕的功能,讓圖片變得更加生動有趣。