jquery Focus Map Switch Simple plug-in production process full record _jquery

Home is often a focus on the need to switch the effect of the project recently done also just need, so the search on the internet, back to a semi-finished product plug-in, here I modified a bit.

JS folder below There are two folders Jquery.jslide.js and Jquery.jslides.js, the first one I rewrote, the second is the original author's file. The following illustration is an effect chart:

First, static effect

<div class= "Slide_wrap" >
 <ul id= "slides2" class= "slide" >
  <li style= "Background:url (' images/ 01.jpg ') no-repeat Center Top "><a href= http://www.jb51.net/" target= "_blank" >pwstrick1</a></li >
  <li style= "Background:url (' images/02.jpg ') no-repeat Center Top" ><a href= "http://www.jb51.net/" target= "_blank" >pwstrick2</a></li>
  <li style= "Background:url (' images/03.jpg ') no-repeat Center Top "><a href=" http://www.jb51.net/"target=" _blank ">pwstrick3</a></li>
  <li Style= "Background:url (' images/04.jpg ') no-repeat Center Top" ><a href= "http://www.jb51.net/" target= "_blank" >pwstrick4</a></li>
 </ul>
</div>

1. Now more popular widescreen focus diagram switching, the previous label is using IMG to show the picture, now have to replace background to do the background map, so there will be no horizontal scroll bar.

2. The outermost set of slide_wrap used to limit the absolute positioning of the picture inside

The class in 3.UL originally I was in the plug-in initialization time added up, now I added in advance, the display effect is better than the later add, you can rewrite the plugin when you make changes

. 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-in dent:-9999px;outline:0}
. slide_wrap. Pagination li.current {background: #0092CE}

1, Slide_wrap and slide in the Height property can be modified according to the actual situation

2, pagination is a picture of the button style, used to control the display of the first few pictures, but also absolute positioning left and top can be modified according to the actual situation

3, the style of each color can also be based on the desired effect to do personalized changes

4, the above style write a bit verbose, in embedded their own projects, can be appropriately streamlined

Second, the way to call

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

1, the UL set into focus diagram plugin

2, the following operations will be around the UL turn

Three, jquery plug-in general format

;(function (Factory) {
 ' use strict ';
 Register as a AMD module, compatible with the 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 to prevent the other code to be compressed together in a row, this will cause syntax errors. For example, Var i=0 (function (Factory) {...} (..);

2, ' use strict ' is to open the strict mode, so that JavaScript interpreter can be used "strict" syntax to parse the code to help developers find errors

3. If the Requirejs module is used to load the frame, define ([' jquery '], factory) is to enable the plugin to support AMD specifications

4, function ($, undefined) This undefined is to prevent the introduction of other JS files, the use of the rewritten undefined

5, _init is used for the initialization of the effect

Four, plug-in initialization

var defaults = {
  speed:3000,
  pagecss: ' pagination ',
  auto:true//Auto Switch
 };
 
 var nowimage = 0;//now which picture
 var pause = false;//suspend
 var Automethod;
/** *
  @method Private
  * @name _init *
  @description initializes plugin
  * @param opts [object] "Initiali zation Options "
  *
 /function _init (opts) {
  opts = $.extend ({}, defaults, opts | | {});
  Apply to all element
  var $items = $ (this);
  for (var i = 0, Count = $items. length; i < count; i++) {
   _build ($items. EQ (i), opts);
  }
  return $items;
 }

1, defaults is exposed to the custom parameters, here I have written three automatic switching speed, select the button style, whether automated

2, three global parameters, Nowimage is the current display of the number of pictures, pause is to control whether the picture is switched or paused, Automethod is the number of the timer function

3, _init has merged the custom parameter, calls the _build to do the creation operation

Five, create plug-ins each operation

/** * @method private * @name _getslides * @description Get the Slide object * @param $node [jQuery o
 Bject] "target Object" */function _getslides ($node) {return $node. Children (' Li '); 
  /** * @method Private * @name _build * @description builds each instance * @param $node [JQuery Object] "target Object"
  * @param opts [object] "plug-in parameter"/function _build ($node, opts) {var $slides = _getslides ($node);
  $slides. EQ (0). Siblings (' Li '). css ({' Display ': ' None '});
  
  var numpic = $slides. Size ()-1;
  $node. Delegate (' Li ', ' mouseenter '), function () {pause = true;//suspend Carousel clearinterval (Automethod);
   }). Delegate (' Li ', ' 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 used to obtain the UL this object of the Li Zi tag, ul is this focus diagram Plug-ins

2, except the first Li tag, the other tags are set to hide

3, get the number of switching pictures, because the following do the loop from subscript 0 start, do <= operation, so minus a 1, in fact, this is also possible to see a person's preferences

4, to the LI tag set mouseenter and MouseLeave events, respectively, is to cancel the cycle and continue the cycle

5. Initialize the selection button

6, Parameter Auto if true, activate automatic switching

Six, initialize the selection button

/**
  * @method Private
  * @name _pagination *
  @description Initialization selection button
  * @param $node [JQuery Object] "target Object" 
   * @param opts [Object] "parameter"
  * @param size [int] "Picture quantity"
  /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& gt; ' + ' </li> ');
  }
  
  $ul. Children (': First "). AddClass (' current ');//Select style
  var $pages = $ul. Children (' Li ');
  $ul. Delegate (' Li ', ' click '), function () {//Bind click event
   var Changenow = $ (this). index ();
   _changepage ($pages, $node, changenow);
  Delegate (' Li ', ' MouseEnter ', function () {
   pause = true;//pause Carousel
  }). Delegate (' Li ', ' MouseLeave ', function () { C21/>pause = false;
  });
  $node. After ($ul);
  return $pages;
  }

1, dynamic Add button UL label, assign a custom class, the child tag Li Plus

2, the first button plus the selected style

3, to the LI tag plus click, MouseEnter and MouseLeave event, click event binding switch operation

4, put the page button on the back of the plug-in object ul

5, return the page button in the Li object, the following useful

Seven, switch pictures

 /**
  * @method Private
  * @name _change *
  @description slide show and Shadow Hide
  * @param $slides [JQuery Object] "Picture Object" 
   
    * @param $pages [JQuery Object] "button Object"
  * @param next [int] "to display the following serial number
  "
  /function _fadeinout ($slides, $page S, next) {
  $slides. EQ (nowimage). CSS (' Z-index ', ' 2 ');
  $slides. EQ (next). css ({' Z-index ': ' 1 '}). Show ();
  $pages. EQ (next). AddClass ("current"). Siblings (). Removeclass (' current ');
  $slides. EQ (nowimage). Fadeout (a function () {
   $slides. EQ (next). fadeIn)
  ;}
 
   

1, the current picture Z-index, the next picture of the Z-index also increased, showing the next picture, so can make a gradient effect, without words will be very blunt switch

2. Select the next option button to add the selected style

3, the application of jquery fadeout and Fadein do hide and show the gradient effect

Eight, automatic cycle

/** *
  @method Private
  * @name _auto *
  @description automatic Carousel
  * @param $slides [JQuery Object] "Picture Object"
  * @par Am $pages [JQuery Object] "button Object"
  * @param opts [object] "parameter"
  /function _auto ($slides, $pages, opts) {
  VA R 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 Auto switch when paused
  }
  }

1. Judge whether to suspend or continue the carousel

2, if not pause, do the current page and the Next button according to the serial number settings

There are a number of problems with plug-ins, such as the inability to bind two different objects on one page, and the huge amount of room for modification.

Through this modification, I have a control of the focus of the switch plugin, although there are many problems, but can be solved step-by-step. Later embedded into their own projects, the modification is also very convenient.

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

Download: http://www.jb51.net/jiaoben/210405.html