[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是我覺得用起簡單又效果不錯的一種，不妨試看看!

我要留言

關於這裡

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

分類

日期

  • daniel: 科樂美秘技超威的啊！（http://2i0f.sl.pt） 醬修改好方便，超直覺的耶～^^ [...]
  • ㄚ凱: 這種作法很有趣.. :) ... 之前也有作過類似的..不過不是直接遷前台... 一 [...]
  • Neo: 真不好意思內~~因為是第一次去吃，也不知道味道如何。等下次我們吃更好 [...]
  • li: 沒找我去吃 [...]
  • cylau: 你好！我加入LoadModule dav_svn_module modules/mod_dav_svn.so及 LoadModule authz_svn_module m [...]

Copyright © 2007 - 哇寶部落格 - is proudly powered by WordPress | 登入

Compositio Theme is created by: Design Disease brought to you by PremiumThemes.com