JQuery focus chart switching Simple plug-in creation process full record _ jquery

This article describes how to create a simple plug-in for jquery focus chart switching. It is very detailed. I hope it will help you. The homepage usually needs a focus chart switching effect, recently, a semi-finished product plug-in is also needed, so I searched online and found a plug-in later. Here I modified it myself.

Under the js folder, there are two folders: jquery. jslide. js and jquery. jslides. js. The first one is changed by me, and the second one is the original file. Yes:

I. Static Effects

 
 
 
  
  
  
pwstrick1
  
  
  
pwstrick2
  
  
  
pwstrick3
  
  
  
pwstrick4
 
 
 

1. Currently, the focus chart switching of the wide screen is quite popular. Previously, labels used img to display images. Now we have to switch to background for background images so that there will be no horizontal scroll bars.

2. the outermost slide_wrap is used to restrict the absolute positioning of images in it.

3. the class in ul was previously added during plug-in Initialization. Now I have added the class in advance, and the display effect is better than that added later. You can modify the class when rewriting the plug-in.

.slide_wrap {width:100%;height:400px;position:relative}.slide_wrap .slide { display:block; width:100%; height:400px; list-style:none; padding:0; margin:0; position:relative;}.slide_wrap .slide li { display:block; width:100%; height:100%; list-style:none; padding:0; margin:0; position:absolute;}.slide_wrap .slide li a { display:block; width:100%; height:100%; text-indent:-9999px;}.slide_wrap .pagination { display:block; list-style:none; position:absolute; left:50%; top:340px; z-index:9900;padding:5px 15px 5px 0; margin:0}.slide_wrap .pagination li { display:block; list-style:none; width:10px; height:10px; float:left;margin-left:15px; border-radius:5px; background:#FFF }.slide_wrap .pagination li a { display:block; width:100%; height:100%; padding:0; margin:0; text-indent:-9999px;outline:0}.slide_wrap .pagination li.current { background:#0092CE}

1. The height attribute in slide_wrap and slide can be modified according to the actual situation.

2. pagination is the button style in the graph. It is used to control the display of the first graph. It is also an absolute left position and top position that can be modified according to the actual situation.

3. The colors in the style can also be customized based on the desired effect.

4. The style above is a bit cool. You can streamline it in your project.

Ii. Call Method