在這裡，我就列舉兩種最常用的播放器型態。如以下範例會以淡入淡出（Fading）的特效，循環播放含有標題的相片：
<html>
<head>
<title>Slideshow 2! Example</title>
<link rel="stylesheet" type="text/css" href="css/slideshow.css" media="screen" />
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/slideshow.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
var data = {
'1.jpg': { caption: '晨曦乍現' },
'2.jpg': { caption: '藍天浮雲' },
'3.jpg': { caption: '夕陽餘暉' }
};
var myShow = new Slideshow('show', data, {
captions: true, controller: true, hu: 'images/', width: 400, height: 300
});
});
</script>
</head>
<body>
<div id="show" class="slideshow">
<img src="images/1.jpg" width="400" height="300" />
</div>
</body>
</html>
你也可以加入有縮圖的移動捲軸：
<script type="text/javascript">
window.addEvent('domready', function(){
var data = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg'];
var myShow = new Slideshow('show', data, {
thumbnails: true, controller: true, hu: 'images/', width: 400, height: 300
});
});
</script>
除此之外，它還能表現出遠近縮放（Zoom）、推進（Push）等特效的動態相片。你可以從這裡看到更多令人驚艷的範例作品展示。如果你覺得這個程式真是受用，不妨也可以到作者的網站，用贊助的行動鼓勵作者喔！
資料來源：
Slideshow 2! A javascript class for Mootools 1.2 to stream and animate the presentation of images on your website by Aeron Glemann
P.S. 本文所使用的範例圖片係取材自 http://www.freeimages.co.uk/。
0 comments :: Slideshow 2!
張貼留言