Nivo Slider.

Nivo Slider is an outstanding jQuery slide plug-in that supports multiple switching effects and is customizable.

This is the official website: http://nivo.dev7studios.com/

However, I did not find any corresponding documentation.

So I simply sorted it out.

 

 

[Javascript]
$. Fn. nivoSlider. defaults = {
Effect: 'random ', // transition effect
Slices: 15, // Number of slices when effect is a slicing effect
BoxCols: 8, // column when effect is a grid effect
BoxRows: 4, // row when effect is a grid effect
AnimSpeed: 500, // animation speed
PauseTime: 3000, // picture switching speed
StartSlide: 0, // start from the number
Direnanav: true, // whether to display the picture switching button (up/down)
DirectionNavHide: true, // whether the cursor is displayed
ControlNav: true, // display sequential navigation
ControlNavThumbs: false, // display image navigation
ControlNavThumbsFromRel: false, // use the rel attribute of img as the thumbnail address
ControlNavThumbsSearch: '.jpg ', // query a specific string (controlNavThumbs must be true)
ControlNavThumbsReplace: '_thumb.jpg ', // replace it with this character (controlNavThumbs must be true)
Keyboardna V: true, // keyboard control (left and right arrows) PS: it is recommended to replace keypress in the Code with keydown, because there is a compatibility issue in Chrome.
PauseOnHover: true, // pause when the mouse passes
ManualAdvance: false, // whether to manually play the slides (false indicates automatic playback of slides)
CaptionOpacity: 0.1, // subtitle transparency
PrevText: 'prev ',
NextText: 'Next ',
RandomStart: false, // whether the image starts randomly
BeforeChange: function () {}, // triggered before the animation starts
AfterChange: function () {}, // triggered after the animation ends
SlideshowEnd: function () {}, // triggered when the current cycle ends
LastSlide: function () {}, // triggered when the last image is played.
AfterLoad: function () {}// triggered when loading is complete
};
$. Fn. nivoSlider. defaults = {
Effect: 'random ', // transition effect
Slices: 15, // Number of slices when effect is a slicing effect
BoxCols: 8, // column when effect is a grid effect
BoxRows: 4, // row when effect is a grid effect
AnimSpeed: 500, // animation speed
PauseTime: 3000, // picture switching speed
StartSlide: 0, // start from the number
Direnanav: true, // whether to display the picture switching button (up/down)
DirectionNavHide: true, // whether the cursor is displayed
ControlNav: true, // display sequential navigation
ControlNavThumbs: false, // display image navigation
ControlNavThumbsFromRel: false, // use the rel attribute of img as the thumbnail address
ControlNavThumbsSearch: '.jpg ', // query a specific string (controlNavThumbs must be true)
ControlNavThumbsReplace: '_thumb.jpg ', // replace it with this character (controlNavThumbs must be true)
Keyboardna V: true, // keyboard control (left and right arrows) PS: it is recommended to replace keypress in the Code with keydown, because there is a compatibility issue in Chrome.
PauseOnHover: true, // pause when the mouse passes
ManualAdvance: false, // whether to manually play the slides (false indicates automatic playback of slides)
CaptionOpacity: 0.1, // subtitle transparency
PrevText: 'prev ',
NextText: 'Next ',
RandomStart: false, // whether the image starts randomly
BeforeChange: function () {}, // triggered before the animation starts
AfterChange: function () {}, // triggered after the animation ends
SlideshowEnd: function () {}, // triggered when the current cycle ends
LastSlide: function () {}, // triggered when the last image is played.
AfterLoad: function () {}// triggered when loading is complete
};
The above $. fn. nivoSlider. defaults is a default setting object, and corresponding annotations have been added.

The effect attribute is used to set the animation effect, which has the following effects:

Random
Fold
Fade
SlideInLeft
SlideInRight
SliceDown
SliceDownRight
SliceDownLeft
SliceUp
SliceUpRight
SliceUpLeft
SliceUpDown
SliceUpDownLeft
SliceUpDownRight
BoxRandom
BoxRain
BoxRainReverse
BoxRainGrow
BoxRainGrowReverse

 

 

[Javascript]
// Keyboard Navigation
If (settings. keyboardna v ){
$ (Window). keypress (function (event ){
// Left
If (event. keyCode = '37 '){
If (vars. running) return false;
ClearInterval (timer );
Timer = '';
Vars. currentSlide-= 2;
NivoRun (slider, kids, settings, 'prev ');
}
// Right
If (event. keyCode = '39 '){
If (vars. running) return false;
ClearInterval (timer );
Timer = '';
NivoRun (slider, kids, settings, 'Next ');
}
});
}
// Keyboard Navigation
If (settings. keyboardna v ){
$ (Window). keypress (function (event ){
// Left
If (event. keyCode = '37 '){
If (vars. running) return false;
ClearInterval (timer );
Timer = '';
Vars. currentSlide-= 2;
NivoRun (slider, kids, settings, 'prev ');
}
// Right
If (event. keyCode = '39 '){
If (vars. running) return false;
ClearInterval (timer );
Timer = '';
NivoRun (slider, kids, settings, 'Next ');
}
});
}

In addition, replace keypress in the Code with keydown.

Due to compatibility issues in Chrome, some buttons (including direction keys) cannot return keycode.

 

The downloaded code contains three topic packages.

You only need to directly modify the class of the div.

[Html]
<Span style = "white-space: pre"> </span> <div class = "slider-wrapper theme-default">
<Div class = "ribbon"> </div>
<Div id = "slider" class = "nivoSlider">

<A href = "http://dev7studios.com"> </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>
<Span style = "white-space: pre"> </span> <div class = "slider-wrapper theme-default">
<Div class = "ribbon"> </div>
<Div id = "slider" class = "nivoSlider">

<A href = "http://dev7studios.com"> </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> modify the class name "theme-default" in the div of the first line, and change "default" to the corresponding CSS file name. (Of course, the premise is that the corresponding CSS file has been inserted into the page)

 

In addition, there are two ways to attach a title to an image.

The first type is:

[Html]
<A href = "http://dev7studios.com"> </a>
<A href = "http://dev7studios.com"> </a> add the title attribute to the tag.

The other is:

[Html]

enter the corresponding ID or class name in the title attribute to obtain the content in the corresponding div below.

[Html]
<Div id = "htmlcaption" class = "nivo-html-caption">
<Span style = "white-space: pre "> </span> <strong> This </strong> is an example of a <em> HTML </em> caption with <a href =" # "> a link </a>.
</Div>
<Div id = "htmlcaption" class = "nivo-html-caption">
<Span style = "white-space: pre "> </span> <strong> This </strong> is an example of a <em> HTML </em> caption with <a href =" # "> a link </a>.
</Div>

If you want to display a single image with a specific effect, www.2cto.com

You can add the data-transition attribute to the label, for example, data-transition = "slideInLeft"

Excerpt from jian sheng's code Memorandum