jquery with Coin-slider plug-ins to make the slide effect process analysis _jquery

Today in order to make a template to collect the slide plugin, finally identified two more appropriate. Coin-slider and Nivoslider, to this end, studied the afternoon, from all aspects to experiment with these two plug-ins, which is more suitable, relatively good.

Of course, you know the smart question. I have to spit it out. Nivoslider this jquery plugin. These two plug-ins, in view of the official demo, this plug-in effect is better than coin-slider. Take a look at the tutorial, you can customize more parameters, seemingly more powerful features. So I began to study the use of this plug-in method. As there are fewer tutorials on the web, most of them are official tutorials for direct copying, and I'm going to take the official demo code directly. This look, directly dizzy death. Loaded with n CSS files, as well as a variety of picture files, Dizzy dead on the spot. Demo inside the code, is also a lot of chaos, is not afraid of many, messy code, is afraid to cite a variety of documents of various effects of the superposition, analysis of the individual tired.

Simply follow the steps themselves, write a small demo, to see how easy the plug-in's ease of use. Follow the official steps to write a picture link, loading the required JavaScript files, and so on. Open a look, immediately without the official demo of the beautiful and powerful, above the page, etc., are required to define the CSS, this is temporarily not managed, so unsightly ugly it. Picture switch is also normal, abnormal place is, in a place, there is a lot of pictures of the next picture block. This switch principle is very simple, generate a lot of Div, each div with CSS in the background-position attribute, the whole picture cut into pieces, and then for each piece of transparency and other changes, show the effect is the kind you see. But now, in the side of a pile of pieces are chaotic, directly without words. The specific situation, I have deleted, also does not capture the screenshot. It is estimated that a piece of CSS is not defined well, when I open the official demo CSS, and Shantou, so many, so messy code. Powerful, must face the difficulty of using the upgrade, it is estimated that this is for the expert-level users to use, I wait for small white or early slip away. Studied for two or three hours and went nowhere. Turned to Coin-slider to go.

First on the Internet to search the relevant information, a predecessor has written a tutorial, and made a demo, download down to see the next, the effect is very good, very little code. At the same time also downloaded the official demo, open the official demo, the following instructions, said clearly. In short, load the prerequisite = "You write your own picture link =" perform that operation. This is also true, maybe I studied Nivoslider before, and Coin-slider and its principle and operation is similar, so I quickly get started and make the effect I want. Here's how to explain:

1, Loading prerequisite components

This coin-slider is a plugin for jquery, open source project address: Https://github.com/kopipejst/coin-slider

Of course, jquery is inseparable. So we're going to load three items: jquery, Coin-slider and coin-slider-styles.css these three. The next two is the plug-in package, the last CSS file, the related style used to format the slides. I reckon Nivoslider is because of the lack of a this, so that caused the chaos, it is possible that I did not find this thing. The code is as follows:

<script type= "Text/javascript" src= "jquery.js" ></script> <script type= "Text/javascript"
Coin-slider.min.js "></script>
<link rel=" stylesheet "href=" Coin-slider-styles.css "type=" text/css "/>

2, write your picture link
We first need to specify a DIV tag with an ID so that the plug-in can find the picture we want to broadcast when the third step is executed. It's a picture of the writing, there are several features, that is, if you want to click on the picture to jump to a link, the outside add a tag; after the IMG tag, create a new span tag, which will appear as a description of the picture. Look directly at the code:

<div id= "Coin-slider" >
 <a href= "#" >
  
  <span>
   Description for nem<br/>odescription for nemodescription for nemodescription for nemodescription for Nemodescripti On for nemodescription for nemodescription for nemodescription for nemodescription for Nemo
  </span>
 </a >
 <a href= "#111" >
  //Loaded picture
  <span>//Picture corresponding description
   Description for Nemo
  </span>
 </a>
</div>

The general framework of this code, which I extracted from the official demo, here I have to spit again, the official demo file, writing is too irregular, HTML tags are used in uppercase, and from the above IMG Src can be seen, they actually used single quotes! CSS file is also the case, the stalker with code obsessive-compulsive m, spent several minutes, the majority of the code into lowercase, add the appropriate change, really silent. Look at the development time, 2010 works, when the XHTML should be popularized, why still use uppercase writing, no language.
3, perform the action

Make sure that the above two steps are complete, and you need to trigger the method to implement the slide function. Method of course is

 $ (document). Ready (function () {
  $ (' #coin-slider '). Coinslider ({height:248});//use various parameter configurations to extend his functionality
 });

Of course, you can also use window.onload, which will make sure that the slide picture is completely downloaded and then the slide shows up.
Obviously, you can also configure a lot of parameters to make the slides more powerful. In the above code, I added a parameter height:248, because my picture height is 248px. Here are some other parameters, I am behind the official comment, a small translation, not accurate words, but also hope to forgive.

width:565,//Width of slider panel slide
height:290,//Height of slider panel slide spw:7,//
squares per W Idth slide cut out the width of the small box
sph:5,//squares per height slide cut out the height of the small box
delay:3000,//delay between images in MS Toggle picture time, millisecond unit
sdelay:30,//delay Beetwen squares in ms Small box change time, millisecond unit (these two try not to change, the official said changed prone to excessive problems)
opacity:0.7,//Opacity of TITL E and navigation picture below the description of the text background transparency
titlespeed:500,//speed of title appereance in MS Title disappearing speed, millisecond unit
effect: ',//R Andom, swirl, rain, straight transform style, random, whirlpool, rain, continuous (try to know the effect)
navigation:true,//prev Next and buttons whether to display the previous, the last button
Links:true,//show images as links whether the picture is a link
hoverpause:true//pause on hover when you put the mouse up, does the picture continue to change

We just need to fill in our own defined parameters like this:

$ (' #coin-slider '). Coinslider ({width:900, navigation:false, delay:5000});

4, Advanced usage
the default style, which is definitely not in line with my template requirements during specific use, so I need to revise it more carefully. It is through CSS, the official CSS file, you can directly modify, you can also create a new CSS file, define it. In Firefox, it's easy to watch what this plugin generates for DIV tags, and the corresponding ID and class. Since you are an advanced user, of course, it is difficult to you, I just mention a train of thought here, the specific will depend on your own to modify.