Simple and practical, easily integrated JavaScript slideshow

Want to add a slideshow header today, want to find a simple and easy to integrate slideshow, do not have the browser problem, do not have the navigation bar and so on, just simple slide effect. Find a few found cross browser problem is not a strong customization ability, Google a large circle, finally found a simple and practical easy integration of JavaScript slideshow--slideshow2, take a look at it.

Slideshow2 is based on MooTools 1.2.

>> Use method

To introduce the necessary style sheets and JS files, you need to introduce the following files:

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

Class

<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 writes the name of the picture used for slideshow, caption defines the text that is displayed with the picture, and if you do not want the text to be displayed, leave it blank. You then create an instance of slideshow and initialize some of the properties.

' Show ' is the ID of the container used to display slideshow

Data is an array of stored pictures

In curly braces are the properties of the slideshow

Controller: Whether to show the navigation bar

HU: The path name for storing pictures

Thumbnails: Whether to display thumbnail images of pictures, set to True, will display thumbnails of all slide pictures under slideshow. You can click to browse the slides.

The corresponding HTML code is as follows

<div id= "Show" class= "Slideshow" >

</div>

>> How to define transition effects

Open the source package of the JS folder, will find in addition to Slideshow.js, there are several JS, respectively, Slideshow.flash.js, Slideshow.fold.js, Slideshow.kenburns.js, Slideshow.push.js, each JS represents a transition effect, the use of the method is also very simple, these JS classes are slideshow extension classes, when used only in the head to introduce the corresponding classes, such as Kenburns effect

In the header of <script type= "Text/javascript" src= "js/slideshow.js" add a sentence after

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

Since this is an extended class, it is important to introduce slideshow.js only to introduce this file

The initialization statement is changed to

var myshow = new Slideshow.kenburns (' Show ', data, {controller:false, height:300, hu: ' images/', thumbnails:false, Width : 400});

You only need to add the appropriate effect name after the slideshow, with the name capitalized, without changing any parameters.

Simple List of >> parameters

Delay: (integer, Default 2000), Slide stop time, unit is milliseconds

Duration: (integer, default 750), slide transition time, that is, the time spent in switching effects, in milliseconds

Loop: Loop playback, default True

Random: Random playback, default false

Titles: whether to use the captions content as the title property of a slide picture and thumbnail

Transition: Transition effect, the default is sine, the optional effects are flash, kenburns, push and fold.