JS Site Carousel Map How to do? Chicken Brother teaches you simple making effect cool

Day dog, just chicken brother hard code So many words are lost and again write, this is the second time to write ...
Today chicken brother to small white write a do not need to write JS native code, only need a few plug-ins and a piece of easy-to-understand jquery code can be done with the Carousel diagram, of course, JS native code is not very cumbersome to write, but some waste time, not to mention a lot of people will not use JS directly to write including chicken brother, That year in school or research for a period of time JS, then also alone wrote a carousel map captured how many of the same sister's heart, but now is the basic waste, this thing to write often, otherwise forget quickly.

Alas, there was still a sister to wait for the chicken brother, I this careless article lost, re-write the words estimated too late, first make a phone call let Sister go home ~ ~ Good cut into the theme!

The principle of this tutorial is to use a great God to write the plug-in, which contains a lot of packaged JS function for us to use, we just need to introduce this plug-in and jquery library to match, and then write the required HTML structure, and finally plug in a piece of easy-to-understand jquery code is done ~ ~
Everyone first Baidu "big talk chairman" first is to click on the download page



After the download is a local site is the same as the online download is the same, open after clicking on the basic effect, if you want to download the extension effect is to pay, anyway, it is not expensive 19 dollars, when the author has to pay the hard money (chicken brother is not to want this goods point advertising costs AH ~ ~ ~ Haha ha)



Chicken brother did not finish, in fact, there are a lot of effects, the right red box is the rotation effect of the property selection, you can generate a section of jquery code (orange part of the code), just said that section of the popular code. This code is going to be used at the end, I'll talk about it in the rear.
All right, big talk. Chairman of the plug-in simple introduction is over, the following for everyone to list the need to plug-in:
1:jquery1.42.min.js/jquery library know dot js people all know
2:jquery. Superslide.2.1.1.js/This is the plugin that just introduced the Chairman
These two plug-in chicken brother will after the big guy read the article at the end attached download link, chicken Brother packing good.
The next chicken brother introduced how to put these two files where to first look at:



For example, after the body end tag to introduce our two files, of course, your path may not be the same as mine.
Special note: The introduction of the order must first introduce jquery plug-in and then introduce the chairman of the plugin or no effect ~ ~ ~

Know how to introduce after you look at the structure of HTML How to write, you must follow this structure, otherwise there is no effect, see the code structure below.

  <Divclass= "box">/This red class name will be used in the rear notice<Divclass= "HD">     <ul><Li>1</Li><Li>2</Li><Li>3</Li></ul>   </Div>   <Divclass= "BD">     <ul><Li>1.jpg</Li><Li>2.jpg</Li><Li>3.jpg</Li></ul>   </Div>  </Div>

such as the above code: a large div wrapped in two small div, the big div class name is the red place can be arbitrary, two small div is a fixed class name, HD is the head of the abbreviation, is the carousel of 1234 of the button. The BD abbreviation is the body, is the carousel diagram.
Well, it's pretty much almost the same. A generated just said orange part of the code, according to the effect you want to generate a code, and then copied to your introduction of the chairman of the speech code below is OK, see the code below:

  JQuery (". Box"). Slide ({maincell: ". BD ul", Effect: "Fold", AutoPlay:true, Intertime:7000,delaytime : 1000});

The red place is filled with the class name of the big Div just spoken, paying special attention to a point in front of it.
To now has basically become, but everyone also do not forget to give you HTML CSS style yo, how is not very simple ~ ~ ~

Okay, here's the article. Finally, the second time. May write some rough, after all, now has more than one o'clock in the morning, I do not know how you crossing feel written, where did not write clearly please write in the comments below, so and upgrade you also promoted me.

Thanks for browsing.

Original link: JS site carousel Map How to do? Chicken Brother teaches you simple making effect cool

JS Site Carousel Map How to do? Chicken Brother teaches you simple making effect cool