官方網站 / 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--淡入淡出效果
$(document).ready(function(){
<script type="text/javascript">
$('#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>
幻燈片效果經常使用在如商品展示或是廣告等等,CrossSlide提供很簡單的語法便能做到以前必須使用flash才能做到的效果。網路上可以找到很多種幻燈片效果的jQuery Plugin,CrossSlide是我覺得用起簡單又效果不錯的一種,不妨試看看!
這段程式主要呈現放大縮小的效果,src:一樣是要使用的圖檔;href:為點下圖片要連到的位置;from:及to:為一組的設定,表示我們希望這張圖打算從from變換成to後再換下一張圖;time:表示每一個圖片動作持續的秒數。
總結
留言列表