[jQuery Plugin]幻燈片效果 CrossSlide

分類: jQuery|技術分享 作者: andrew

18 六月 2009

sample

官方網站 / demo


http://www.gruppo4.com/~tobia/cross-slide.shtml

CrossSlide 是一個幻燈片效果的jQuery Plugin,可以實現多種不同風格的幻燈片展示效果,包括淡入淡出,輪播,放大縮小等等。下面以三個程式碼範例來說明用法。

共同程式碼

1
2
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cross-slide.js"></script>

此兩行為載入必要的js檔。

程式碼1--上下滑動效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript">
 
$(document).ready(function(){
          $('#test1').crossSlide({
          speed: 45,
          fade: 1
          }, [
          { src: '1.jpg', dir: 'up'   },
          { src: '2.jpg',   dir: 'down' }
          ]);
});
</script>
<style type="text/css">
  #test1 {
    margin: 1em auto;
    border: 2px solid #555;
    width: 500px;
    height: 200px;
  }
</style>
<H3>SAMPLE1</H3>
<div id="test1">Loading…</div>

src:代表要使用的圖檔,dir: 'up'則表示往上滑動後變換下一張圖,相對的dir: 'down'即表示向下滑動後變換下一張圖。

程式碼2--淡入淡出效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript">
 
$(document).ready(function(){
          $('#test2').crossSlide({
          sleep: 2,
          fade: 1
          }, [
          { src: '1.jpg' },
          { src: '2.jpg'   }
          ]);
});
</script>
<style type="text/css">
  #test2 {
    margin: 1em auto;
    border: 2px solid #555;
    width: 500px;
    height: 200px;
  }
</style>
<H3>SAMPLE2</H3>
<div id="test2">Loading…</div>

如果在src:後不指定任何動作則呈現淡入淡出的效果。

程式碼3--放大縮小效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<script type="text/javascript">
 
$(document).ready(function(){
          $('#test3').crossSlide({
          fade: 1
          }, [
          {
          src:  '1.jpg',
          href: 'http://flickr.com/photos/spacetrucker/94209642/',
          from: '100% 80% 1x',
          to:   '100% 0% 1.7x',
          time: 3
          }, {
          src:  '2.jpg',
          href: 'http://flickr.com/photos/hichako/1125341449/',
          from: 'top left',
          to:   'bottom right 1.5x',
          time: 2
          }, {
          src:  '1.jpg',
          href: 'http://flickr.com/photos/spacetrucker/94209642/',
          from: '100% 80% 1.5x',
          to:   '80% 0% 1.1x',
          time: 2
          }, {
          src:  '2.jpg',
          href: 'http://flickr.com/photos/hichako/1125341449/',
          from: '100% 50%',
          to:   '30% 50% 1.5x',
          time: 2
          }
          ]);
});
</script>
<style type="text/css">
  #test3 {
    margin: 1em auto;
    border: 2px solid #555;
    width: 500px;
    height: 200px;
  }
</style>
<H3>SAMPLE3</H3>
<div id="test3">Loading…</div>

這段程式主要呈現放大縮小的效果,src:一樣是要使用的圖檔;href:為點下圖片要連到的位置;from:及to:為一組的設定,表示我們希望這張圖打算從from變換成to後再換下一張圖;time:表示每一個圖片動作持續的秒數。

總結

幻燈片效果經常使用在如商品展示或是廣告等等,CrossSlide提供很簡單的語法便能做到以前必須使用flash才能做到的效果。網路上可以找到很多種幻燈片效果的jQuery Plugin,CrossSlide是我覺得用起簡單又效果不錯的一種,不妨試看看!

我要留言

關於這裡

這個部落格分享了哇寶在電子商務領域的技術及資訊,希望能讓更多人一起為台灣的網路產業加油。