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

jquery 相冊左右滑動

老白1年前7瀏覽0評論

JQuery相冊左右滑動的實現(xiàn)方法如下:

$(function(){
var index = 0;//圖片編號
var imgWidth = $(".imgs img").width();//圖片寬度
var len = $(".imgs img").length;//圖片數(shù)量
var wd = imgWidth * len;//圖片總寬度
$(".imgs").css({'width':wd + 'px'});//設(shè)置總寬度
$("#prev").click(function(){
index--;//向前移動一個
if(index< 0){
index = len - 1;//移到最后一個
$(".imgs").css({'margin-left':-imgWidth*(len-1) + 'px'})//瞬間移到最后一個
}
$(".imgs").animate({'margin-left':-imgWidth*index + 'px'},500);//移動
});
$("#next").click(function(){
index++;//向后移動一個
if(index >len - 1){
index = 0;//移到第一個
$(".imgs").css({'margin-left':0});//瞬間移到第一個
}
$(".imgs").animate({'margin-left':-imgWidth*index + 'px'},500);//移動
});
});

這段代碼實現(xiàn)了一個簡單的相冊左右滑動效果。其中,當點擊“上一張”按鈕時,圖片編號-1,如果移動到了第0張,則直接瞬間移到最后一張。當點擊“下一張”按鈕時,圖片編號+1,如果移到了最后一張,則直接瞬間移到第一張。然后通過動畫效果,將圖片容器向左移動相應(yīng)的距離,實現(xiàn)了相冊左右滑動的效果。