jquery's picture Carousel plugin Pgwslideshow use detailed _jquery

0 Pgwslideshow Profile

Pgwslideshow is a jquery based image Carousel Plugin, the basic layout is divided into the upper and lower structure, the top for the large map of the carousel area, the user can customize the time of the picture carousel switch, you can also click the left and right direction button to achieve the picture switch; Below is a thumbnail display of all the pictures to be carousel, You can quickly switch pictures by clicking thumbnails directly.

Pgwslideshow mainly has the following characteristics:

• A responsive design with a good degree of experience

• Support for desktop and mobile devices

• The body is vigorous, compressed files less than 4KB

• You can customize or directly modify the basic CSS style to give you want to the Carousel plug-in beauty capacity

Pgwslideshow Core Files:

pgwslideshow.css/pgwslideshow.min.css Default Style file pgwslideshow_light.css/pgwslideshow_light.min.css light-colored style file · Pgwslideshow.js/pgwslideshow.min.js js File

Intuitive experience

1 Pgwslideshow Use

1.0 adding related file references

Because Pgwslideshow relies on jquery, a basic pgwslideshow use needs to add the following references to the head of your HTML page

<link href= "~/content/plugins/pgwslideshow/pgwslideshow.min.css" type= "
text/css" rel= "stylesheet"/> <script src= "~/content/js/jquery-2.1.4.min.js" ></script>
<script src= "~/content/plugins/" Pgwslideshow/pgwslideshow.min.js "type=" Text/javascript "></script>

Effect of referencing default style Pgwslideshow.min.css

The effect of referring to the light line style pgwslideshow_light.min.css

1.1 Defining HTML element structure

Pgwslideshow uses the UL element, the UL element each Li label identifies a carousel picture

<!--definition UL its class designation is "Pgwslideshow"--> <ul class= "Pgwslideshow" > <!--src: The path that identifies the carousel picture--> <!-- ALT: Identifies a carousel picture's title--> <!--data-description: A data description that identifies a carousel picture, displayed below the title--> <!--DATA-LARGE-SRC: The path that identifies the large image above the carousel picture, such as not setting , the default uses src picture path--> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li> <! --This can be wrapped through a tag of IMG, to the carousel picture plus you want the hyperlink--> <a href= "http://www.cnblogs.com/fonour" target= "_blank" >  </a> </li> </ul>

1.2 Use of Plug-ins

The use of pgwslideshow is very simple, simply call the Pgwslideshow () method through the UL element.

$ (document). Ready (function () {
$ ('. Pgwslideshow '). Pgwslideshow ();
});

Method call, we can also do some configuration as needed

var option = {
mainclassname: ' pgwslideshow ',///Use your custom CSS style to show the Carousel map
transitioneffect: ' sliding ',///Carousel Diagram Toggle Animation effect, There are two options sliding (sliding effect), fading (fade effect)
Autoslide:false,//Whether the carousel graph is allowed to automatically cycle by time interval
beforeslide:false,//function type properties, A callback function that is before each switch in a carousel diagram. such as "function (ID) {Console.log (' before switching, current ID ' + ID ');}"
Afterslide:false,//function type attribute, the callback function after each switch in the Carousel diagram. such as "function (ID) {console.log (' after switch, current ID ' + ID ');}"
Displaylist:true,//whether to display thumbnails in the form of a list
displaycontrols:true,//whether to display a forward, page backward button.
Touchcontrols:true,//whether to support the mobile device Touch paging operation
Maxheight:null,//Set the maximum height of the carousel plug-in, directly write the value, do not need to take PX unit
transitionduration:500,//Picture Auto Carousel When the picture is switched time, unit millisecond
intervalduration:3000//show the next picture before the interval unit milliseconds, This parameter requires Autoslide to be true
};
$ ('. Pgwslideshow '). Pgwslideshow (option);

1.3 Some common JS methods

var pgwslideshow = $ ('. Pgwslideshow '). Pgwslideshow (); Get the Carousel Plug-in object
pgwslideshow.startslide ();//Control the Carousel plug-in start the Carousel
pgwslideshow.stopslide ();//control the Carousel plug Stop
Carousel Pgwslideshow.getcurrentslide (); Gets the serial number Pgwslideshow.getslidecount () of the current carousel picture, 
///Gets the number of pictures included in the current Carousel plug-in 
Pgwslideshow.displayslide (3); Displays the Pgwslideshow.nextslide () of the specified serial number by the numeric value in the parameter
();//Display the next picture
pgwslideshow.previousslide ();//Show Previous picture
Pgwslideshow.destroy (); Destroys the Carousel diagram object. Can be controlled by optional parameters, if the pass in parameter true, then the container is simply hidden
pgwslideshow.reload ({///reload the Carousel diagram plug-in with the new configuration parameters
TransitionEffect: ' Fading ' , 
adaptiveduration:4000 
});

1.4 Loading server-side data

Loading server-side data is also very simple, only need to be based on the data returned by the server, dynamically construct the Li tag, and then add the UL element, then call Pgwslideshow () on the line.

<ul class= "Pgwslideshow" id= "PictureBox" ></ul> 
$ (function () {
var pictures = Json.parse ($ ("# Anchorpictures "). Val ()); Here generally use Ajax to accept server-side return data
var html = ""
$.each (Pictures, function (I, item) {
HTML = "<li></li>";
});
$ ("#pictureBox"). HTML (HTML);
$ ('. Pgwslideshow '). Pgwslideshow ();

The above is a small set to introduce the jquery pictures of the use of the Pgwslideshow plug-in plug-ins, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!