Picture Carousel (Jquery)

Yesterday in the blog Park to see Imwtr wrote the picture Carousel (Fade) of the article, feel whether they can be written in the form of jquery plug-in, but also convenient after the time if necessary can be used directly.

After the adjustment and integration, completed the first version of the jquery.carousel.js, followed by a brief introduction to the interface and features:

1. Interface

2. function

Click Switch, forward switch, back switch, timed switch

3. Function realization

(1), test code

$(function () {    vardata =[{src:' Content/home/1.jpg ', info: ' 1.jpg Click on image to navigate to About.html ', alt: ', href: ' about.html '}, {src:' Content/home/2.jpg ', info: ' 2.jpg '}, {src:' Content/home/3.jpg ', info: ' 3.jpg '}, {src:' Content/home/4.jpg ', info: ' 4.jpg '}, {src:' Content/home/5.jpg ', info: ' 5.jpg '}, {src:' Content/home/6.jpg ', info: ' 6.jpg '}, {src:' Content/home/7.jpg ', info: ' 7.jpg ' }    ]; varCaro = $ (' #container '). Carousel ({data: [],//data,' Info-opacity ': 0, Height:300, Width:400, Interval:2000,        ' Default-index ': 2,        ' Show-index ':true,        ' Nav-width ': 20,        ' Nav-color ': ' Red ', OnChange:function(item) {}}); //Caro.carousel (' clear ');Caro.carousel (' LoadData ', data); varindex = Caro.carousel (' GetIndex '); vardata = Caro.carousel (' GetData ', index); $(' #next '). Click (function() {Caro.carousel (' Next ');    }); $(' #prev '). Click (function() {Caro.carousel (' Prev '); });});

(2), code detailed introduction

The default property contains the following sections:

$.fn.carousel.defaults = {        ' Data ': [],        ' Height ': ' Auto ',        ' Width ': ' Auto ',        ' Info-background-color ': ' Black ',//Display information background color' Info-height ': 40,//Displays the height of the information background' Info-opacity ': 0.1,//Show transparency of information backgrounds' Info-style ': ' Font-size:12pt;color:black; ',//Display Information Styles' Default-index ': 0,//default ordinal at initial        //' nav-width ': 10,//left/right navigation width, not set to half of HEIHHT by default (height not auto, otherwise)' Nav-color ': ' #f6fafa ',//left and right side navigation color' Interval ': 5000,//Automatic switching cycle' Show-index ':false,//the serial number on the lower right side button is not displayed by default' Auto ':true,//Automatic Switching' Border ':true,//Show Border' Margin ': ' 30px auto ', OnChange:function(item) {}};

Methods include

$.fn.carousel.methods ={options:function(JQ) {return$.data (jq[0], ' Carousel '). Options; }, clear:function(JQ) {cleardata (jq[0]); }, LoadData:function(JQ, data) {ClearData (jq[0]); BindingData (jq[0], data); }, Prev:function(JQ) {varOptions = $.data (jq[0], ' Carousel '). Options; varPanel = $ ('. My-panel ', jq[0]);        Prev (panel, options); }, Next:function(JQ) {varOptions = $.data (jq[0], ' Carousel '). Options; varPanel = $ ('. My-panel ', jq[0]);        Next (Panel, options); }, GetIndex:function(JQ) {varOptions = $.data (jq[0], ' Carousel '). Options; returnoptions[' Now-index ']; }, GetData:function(JQ, index) {varOptions = $.data (jq[0], ' Carousel '). Options; returnOptions.data[index]; }    };

Finally, the demo

Due to the limited level, the code will inevitably appear wrong or imperfect situation, but also please the Aunt pointed out ~

Picture Carousel (Jquery)