Slideshow 2!

Slideshow 2! 是一個以 Mootools 為基礎所設計的 JavaScript 類別,它可以協助你輕易建立多種有如 Flash 動畫效果般的 DHTML 投影片播放器。除了完整的功能之外,其動感的視覺效果表現更是 Slideshow 2! 的重點特色。你可以從這裡找到最新版本的原始碼及說明文件。

在這裡,我就列舉兩種最常用的播放器型態。如以下範例會以淡入淡出(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/


Share/Save/Bookmark

0 comments :: Slideshow 2!

張貼留言