老周的部落

 

官方網站 / demo  http://www.gruppo4.com/~tobia/cross-slide.shtml

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

共同程式碼

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


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

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

<script type="text/javascript"><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--淡入淡出效果

<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--放大縮小效果

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