Nivo Slider Slide plugin based on jquery

Main Features:

The world's best jquery slideshow Plugin

16 kinds of effects of slide change

Simple and flexible to configure

Small in size and consistent with semantics

jquery plug-ins are free (but WordPress: 20 USD)

Here I say a little bit, jquery plug-ins are everywhere, we need to choose the purpose of a plug-in, the site has its own independent site, the site is very formal, others do not say, use the rest assured. And there is a technical support team, but only to support paid users. Slide effect and efficiency are good, comparable to flash slide. For example, this Flash slide show.

JavaScript code

Class Library References:

The code is as follows	Copy Code
<script type= "Text/javascript" src= "Scripts/jquery-1.6.4.min.js" ></script> <script type= "Text/javascript" src= ". /jquery.nivo.slider.pack.js "></script>

Calling code:

The code is as follows	Copy Code
$ (window). Load (function () { $ (' #slider '). Nivoslider (); });

You can customize the following options:

Effect: Set the slide change effect, you can use ' random ', or specify effects such as, ' Fold,fade,slicedown '

Slices:slice Animation effect Parameters

Boxcols:box Animation effect Parameters

Boxrows:box Animation effect Parameters

Animspeed: Animation Change speed

Pausetime: Each slide time

Startslide: Starting Slide

Directionnav: Show "prev" and "Next" navigation

Directionnavhide: Whether to hover display navigation

Controlnav: Whether to show navigation control

Controlnavthumbs: Navigate whether to use thumbnails

Controlnavthumbsfromrel: Do you want the picture to use rel

Controlnavthumbssearch: navigation thumbnail suffix

Controlnavthumbsreplace: Navigation thumbnail replacement

Keyboardnav: whether keyboard navigation

Pauseonhover: Whether suspension stops

Manualadvance: Whether to manually change the slide

Captionopacity: Title Transparency

Prevtext: Previous text set

Nexttext: Next Text set

Randomstart: Whether to start randomly

BeforeChange: function, calling before a slide change

AfterChange: function, calling after a slide change

SlideShowEnd: function, complete call in slide change

Lastslide: function, complete call at last slide change

Afterload: function, slider after load call

code example:

The code is as follows

Copy Code

<script type= "Text/javascript" > $ (window). Load (function () { $ (' #slider '). Nivoslider ({ Effect: ' random ',//Specify sets like: ' Fold,fade,slicedown ' SLICES:15,//for slice animations Boxcols:8,//For box animations Boxrows:4,//For box animations animspeed:500,//Slide transition speed pausetime:3000,//How long each slide'll show startslide:0,//Set starting Slide (0 index) Directionnav:true,//Next & Prev Navigation Directionnavhide:true,//Only show on hover Controlnav:true,//1,2,3 ... Navigation Controlnavthumbs:false,//Use thumbnails for control Nav Controlnavthumbsfromrel:false,//Use image rel for thumbs Controlnavthumbssearch: '. jpg ',//Replace this with ... Controlnavthumbsreplace: ' _thumb.jpg ',//... this in thumb Image src Keyboardnav:true,//Use Left & Right arrows Pauseonhover:true,//Stop animation while hovering Manualadvance:false,//Force manual transitions captionopacity:0.8,//Universal caption Opacity Prevtext: ' Prev ',//Prev Directionnav text Nexttext: ' Next ',//Next Directionnav text Randomstart:false,//Start on a random slide Beforechange:function () {},//triggers before a slide transition Afterchange:function () {},//triggers after a slide transition Slideshowend:function () {},//Triggers after all slides have been shown Lastslide:function () {},//triggers when last slide is shown Afterload:function () {}//triggers when slider has loaded }); }); </script>

HTML code

The code is as follows	Copy Code
<div class= "Slider-wrapper theme-default" > <div class= "Ribbon" ></div> <div id= "Slider" class= "Nivoslider" > <a href= "http://www.111cn.net" ><" /a> </div> <div id= "htmlcaption" class= "Nivo-html-caption" > <strong>This</strong> is an example of a <em>HTML</em> caption with <a href= "#" >a link</ A>. </div> </div>

How to customize the change effect for each slide:

The code is as follows	Copy Code