jquery 視覺特效(幻燈片左右移動)

2022-08-10 17:27:19 字數 3369 閱讀 1427

描述:

點選指示左右方向的,可以左右移動,並且左移動乙個,此(第乙個)自動排到佇列最後面(成為最後一張)。右移動乙個,此(最後乙個)自動排到佇列最前面(成為第一張)

先不管了,以後再說吧。

css(#scroller注釋overflow:hidden是為了看效果

):

img

/*只能容納顯示一張

*/#scroller#images#images a img#direction

jquery:

//

物件var $img_obj = $('

#images a img');

//左右指示的物件

var $direction = $('

#direction a img');

//左指示

var $leftdir = $direction.eq(0

);//

右指示var $rightdir = $direction.eq(1

);

var $leftanimator =function(imgobj),

300);

//點選時,此時的a物件集合

var $now_a_obj = $('

#images a');

//把此時佇列裡隊首放到隊尾

#images

'));

}var $rightanimator =function(imgobj),

300);

//移動的是a以及其包含的img

var $now_a_obj = $('

#images a');

//點選時,此時的a物件集合

var $now_img_obj = $('

#images a img');

var length =$now_img_obj.length;

//把此時佇列里隊尾放到隊首

$now_a_obj.eq(length-1).prependto($('

#images

'));

}

//讓指示半透明

$direction.fadeto(100, 0.5

);

$direction.hover(function(),

300);

}, function(),

300);

});$leftdir.click(function())

$rightdir.click(function());

});

截圖:初始:

點選左指示一次:

點選左指示二次:

點選右指示一次:

點選右指示二次:

Jquery簡單幻燈片

看了許多jquery的幻燈片,自己也想學著弄乙個,簡單是簡單了一點。不過研究過,還是比較安慰的啦,以下 並未在生產環境中使用過,如果您要在生產環境中使用,請慎重 slide frameid,framewidth,frameheight,ulid,isshow,intervaltime 外層物件id,...

jquery 幻燈片效果

閒著無聊,用jquery寫了乙個幻燈片效果。我這人喜歡造輪子,除了jquery這種有強大開發團隊的框架級別js,其實的一些小程式都是盡量自己寫。一是因為怕出問題了沒人問,二是自己寫的改起來也方便。效果可參考 只是上面這個demo用的是supersized,功能比較強大,就是 加密過了,讀起來很困難。...

jquery幻燈片 漸變

上為了設計,需要一些幻燈片效果,現在 有很多外掛程式可以使用。想要成為以為牛逼的程式設計師,絕對不允許只會用別人的外掛程式而已,不然你只能是 的搬運工,而不敢做出自己的創新。首先使用jquery做漸變效果,一般使用fadeout fadein 漸入漸出 效果。但是因為fadeout fadein在停...