萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> 簡單實用容易集成的javascript slideshow

簡單實用容易集成的javascript slideshow

 今天想加一個slideshow header,想找一個簡單容易集成的slideshow,不要有浏覽器問題,不要有導航條之類的,只是簡單的幻燈片效果。找了幾個發現不是有cross browser問題就是定制化能力不強,google一大圈後,終於發現了一個簡單實用容易集成的javascript slideshow——Slideshow2,一起來看看吧。

 

Slideshow2是基於Mootools 1.2的

>>使用方法

引入必要的樣式表和js文件,需要引入的文件如下:

<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">

//<![CDATA[

window.addEvent('domready', function(){

var data = {

'1.jpg': { caption: '' },

'2.jpg': { caption: 'A Ceibu tree.' },

'3.jpg': { caption: 'The view from Volcano Maderas.' },

'4.jpg': { caption: 'Beer and ice cream.' }

};

var myShow = new Slideshow('show', data, {controller: false, height: 300, hu: 'images/', thumbnails: false, width: 400});

});

//]]>

</script>

date裡寫上用於slideshow的圖片名稱,caption定義和圖片一起顯示的文字,如果不希望顯示文字,留空即可。然後創建一個slideshow的實例,並初始化一些屬性。

‘show’是用於顯示slideshow的容器的id

data是存儲圖片的數組

大括號中的是slideshow的屬性

Controller:是否顯示導航條

hu: 存儲圖片的路徑名稱

Thumbnails:是否顯示圖片縮略圖,設為true,會在slideshow底下顯示所有幻燈圖片的縮略圖。可以點擊浏覽幻燈片。

相應的html代碼如下

<div id="show" class="slideshow">

<img src="images/1.jpg" alt="Volcano Asención in Ometepe, Nicaragua." />

</div>

>>如何定義過渡效果

打開源文件包的js文件夾,會發現除了slideshow.js以外還有幾個js,分別是slideshow.flash.js、slideshow.fold.js、slideshow.kenburns.js、slideshow.push.js,每一個js都代表著一個過渡效果,使用方法也很簡單,這些js類都是slideshow的擴展類,使用的時候只需要在頭部引入相應的類,例如kenburns效果

在header的<script type="text/javascript" src="js/slideshow.js"></script>後面加一句

<script type="text/javascript" src="js/slideshow.kenburns.js"></script>

因為這是擴展類,所以一定要引入slideshow.js只有再引入這個文件

初始化語句改為

var myShow = new Slideshow.Kenburns('show', data, {controller: false, height: 300, hu: 'images/', thumbnails: false, width: 400});

只需要在Slideshow後面加上相應的效果名,名稱大寫,無需更改任何參數。

 

>>參數簡單列舉

delay:(整數,默認2000),幻燈片停留時間,單位是毫秒

duration:(整數,默認750),幻燈片切換時間,即切換效果所花費的時間,單位毫秒

loop:是否循環播放,默認true

random:是否隨機播放,默認false

titles:是否將captions內容用作幻燈圖片和縮略圖的title屬性

transition:過渡效果,默認是Sine,可選效果有Flash、Kenburns、Push和Fold。

copyright © 萬盛學電腦網 all rights reserved