JQuery focus chart switching Simple plug-in production process full record, jquery full record

JQuery focus chart switching Simple plug-in production process full record, jquery full record

The home page often requires a focus chart switching effect, and the recently created projects are also needed. So I searched online and found a plug-in for the semi-finished products. I modified it myself here.

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

<div class="slide_wrap"> <ul id="slides2" class="slide">  <li style="background:url('images/01.jpg') no-repeat center top"><a href="http://www.bkjia.com/" target="_blank">pwstrick1</a></li>  <li style="background:url('images/02.jpg') no-repeat center top"><a href="http://www.bkjia.com/" target="_blank">pwstrick2</a></li>  <li style="background:url('images/03.jpg') no-repeat center top"><a href="http://www.bkjia.com/" target="_blank">pwstrick3</a></li>  <li style="background:url('images/04.jpg') no-repeat center top"><a href="http://www.bkjia.com/" target="_blank">pwstrick4</a></li> </ul></div>

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

<script type="text/javascript"> $('#slides2').jslide();</script>

1. Set ul as the focal point chart plug-in

2. The following operations will be switched around ul

Iii. General Format of jQuery plug-in

; (Function (factory) {'use strict '; // Register as an AMD module, compatible with script loaders like RequireJS. if (typeof define = 'function' & define. amd) {define (['jquery '], factory);} else {factory (jquery) ;}( function ($, undefined) {'use strict '; // intermediate plug-in code $. fn. jslide = function (method) {return _ init. apply (this, arguments );};}));

1. The first Semicolon is used to prevent a syntax error from being merged into a row when it is compressed with other code. For example, var I = 0 (function (factory ){......}(..);

2. 'Use strict 'enables strict mode so that the Javascript interpreter can parse the Code with "strict" syntax to help developers discover errors.

3. If the requirejs module loading framework is used, define (['jquery '], factory) will enable the plug-in to support AMD specifications.

4. function ($, undefined) the undefined here is designed to prevent the use of the overwritten undefined when other js files are introduced.

5. _ init is used for initialization.

Iv. Plug-in Initialization

Var defaults = {speed: 3000, pageCss: 'pagination', auto: true // automatic switch}; var nowImage = 0; // which image is var pause = false; // pause var autoMethod; /*** @ method private * @ name _ init * @ description Initializes plugin * @ param opts [object] "Initialization options" */function _ init (opts) {opts = $. extend ({}, defaults, opts ||{}); // Apply to each element var $ items =$ (this); for (var I = 0, count = $ items. length; I <count; I ++) {_ build ($ items. eq (I), opts);} return $ items ;}

1. defaults is the exposed custom parameter. Here I write three auto-switching speeds, select button styles, and determine whether automation is required.

2. Three global parameters: nowImage indicates the serial number of the currently displayed image, pause indicates whether the image is switched or paused, and autoMethod indicates the serial number of the scheduled function.

3. Merge custom parameters in _ init and call _ build for creation.

5. Create plug-in operations

/*** @ Method private * @ name _ getSlides * @ description get the slide object * @ param $ node [jQuery object] "target object" */function _ getSlides ($ node) {return $ node. children ('lil ');} /*** @ method private * @ name _ build * @ description Builds each instance * @ param $ node [jQuery object] "target object" * @ param opts [object] "INS parameter "*/function _ build ($ node, opts) {var $ slides = _ getSlides ($ node); incluslides.eq(0).siblings('li'detail.css ({'display': 'none'}); var numpic = $ slides. size ()-1; $ node. delegate ('lil', 'mouseenter', function () {pause = true; // pause slideshow clearInterval (autoMethod );}). delegate ('lil', 'mouseleave ', function () {pause = false; autoMethod = setInterval (function () {_ auto ($ slides, $ pages, opts );}, opts. speed) ;}); // console. log (autoMethod) var $ pages = _ pagination ($ node, opts, numpic); if (opts. auto) {autoMethod = setInterval (function () {_ auto ($ slides, $ pages, opts) ;}, opts. speed );}}

1. _ getSlides is used to obtain the li sub-tag of the ul object. ul is also the focus graph plug-in.

2. Set other labels except the first li label to hide

3. Get the number of images to switch. Because the subsequent cycle starts from subscript 0 and does the <= operation, it is okay to subtract 1 from it.

4. Set the events of mouseenter and mouseleave for the li tag, respectively, to cancel the loop and to continue the loop.

5. Select initialization button

6. If the Parameter auto is true, automatic switch is activated.

6. Select initialization button

/*** @ Method private * @ name _ pagination * @ description initialization selection button * @ param $ node [jQuery object] "target Object" * @ param opts [object] "parameter "* @ param size [int]" number of images "*/function _ pagination ($ node, opts, size) {var $ ul = $ ('<ul>', {'class': opts. pageCss}); for (var I = 0; I <= size; I ++) {$ ul. append ('<li>' + '<a href = "javascript: void (0)">' + (I + 1) + '</a>' + '</li>');} $ ul. children (': first '). addClass ('current'); // select the style var $ pages = $ ul for the first button. children ('lil'); $ ul. delegate ('lil', 'click', function () {// bind the click Event var changenow = $ (this ). index (); _ changePage ($ pages, $ node, changenow );}). delegate ('lil', 'mouseenter', function () {pause = true; // pause carousel }). delegate ('lil', 'mouseleave ', function () {pause = false ;}); $ node. after ($ ul); return $ pages ;}

1. dynamically Add the button ul tag, assign it to a custom class, and add the Sub-label li

2. Add the selected style to the first button.

3. Add the click, mouseenter, and mouseleave events to the li tag, and bind the click event to the switchover operation.

4. Put the paging button behind the ul of the plug-in object.

5. Return the li object in the pagination button.

7. Switch Images

/*** @ Method private * @ name _ change * @ description slide display and shadow * @ param $ slides [jQuery object] "image object" * @ param $ pages [jQuery object] "Button Object" * @ param next [int] "next sequence number to be displayed" */function _ fadeinout ($ slides, $ pages, next) {export slides.eq(nowimage).css ('z-Index', '2'); export slides.eq(next).css ({'z-Index': '1 '}). show (); $ pages. eq (next ). addClass ('current '). siblings (). removeClass ('date'); $ slides. eq (nowImage ). fadeOut (400, function () {$ slides. eq (next ). fadeIn (500 );});}

1. Increase the z-index of the current image and the z-index of the next image to show the next image. This will produce a gradient effect, if this parameter is not added, the switchover will be very rigid.

2. Add a selected style next to the select button

3. Apply the fadeOut and fadeIn of jQuery to perform gradient effects of hiding and displaying.

8. Automatic cycle

/*** @ Method private * @ name _ auto * @ description automatic carousel * @ param $ slides [jQuery object] "image object" * @ param $ pages [jQuery object]" button Object "* @ param opts [Object]" parameter "*/function _ auto ($ slides, $ pages, opts) {var next = nowImage + 1; var size = $ slides. size ()-1; if (! Pause) {if (nowImage> = size) {next = 0;} _ fadeinout ($ slides, $ pages, next); if (nowImage <size) {nowImage + = 1 ;}else {nowImage = 0 ;}} else {clearInterval (autoMethod); // cancel Automatic Switch upon suspension }}

1. Determine whether to suspend or continue carousel

2. If it is not paused, set the serial number of the current page and next button Based on the conditions.

There are still many problems with the plug-in. For example, you cannot bind two different objects to a page, and there is a huge space for modification.

With this modification, you have a controllable focus chart switching plug-in. Although there are still many problems, you can solve them step by step. Later embedded in your own project, it is much easier to modify.

Demo: http://demo.jb51.net/js/2014/jsilde/

Download: http://www.bkjia.com/jiaoben/210405.html

Questions about how jquery creates a focus chart

Try this image carousel
Switch with 12345 numbers
Switch with a thumbnail
The tutorials and source code are provided.


Reference: www.blueidea.com/..20.11341


How to make a jquery focus chart with concise code

Demo.jb51.net/js/myfocus/
<Script type = "text/javascript">
MyFocus. set ({
Id: 'boxid', // the ID of the focus graph box.
Pattern: 'mf _ fancy ', // name of the style Application
Time: 3, // switch interval (seconds)
Trigger: 'click', // trigger switch mode: 'click'/'mouseover' (hover)
Width: 450, // set the image area width (pixel)
Height: 296, // sets the height of the image area (in pixels)
TxtHeight: 'default' // text layer height (pixel), 'default' is the default height, and 0 is hidden
});
</Script>

You can use this plug-in