jquery to realize the image fade and fade the display effect _jquery

Before we do that, let's see what the effect is:

We want the picture in a "certain time" after the automatic switch, in the lower right corner has small squares like digital 1,2,3,4, these figures are based on the number of pictures automatically appear, when the mouse through the digital color has a certain change;

Let's see how it's going to be implemented.

The first step: first write a simple HTML page

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
 
 

Page code parsing: first set up scrollpic.html,scrollpic.js,scrollpic.css. Apart first to build the three basic files you want, and then introduce it into the head in HTML, where attention

Src= ". /js/jquery.js "
The meaning of this code, ". /"means to jump out of the superior directory, and then in the JS folder to find jquery.js files;"
In the HTML page, we add a class to ' Pic-slider-io ' div in the body, in the DIV has a ul,li below has four pictures, note: The picture is set up well named, for 1.jpg,2.jpg ... Facilitate the preparation of scrollpic.js;
Let's take a look at this time. Page style:

Can see the picture is a size of the original tile on the page, a default UL Li's way to show on the page;
Now we're going to put it in the lower left corner;

Step two: Write a CSS style to control it
First, control the display of the DIV:

. pic-slider-io{
  height:200px;  Set Div's height to 200px;
  width:800px; 　　Set the width of the div to 800px;
  float:letf; The float property defines in which direction the element floats. Historically this attribute is always applied to images, making text around the image, but in CSS, any element can float. A floating element generates a block-level box, regardless of what element it is itself.　　
  position:relative; The Position property defines the location type of the element. This property define the positioning mechanism used to establish the element layout. Any element can be positioned, but an absolute or fixed element generates a block-level box regardless of the type of element itself. The relative fixed//bit element is offset from its default position in the normal stream. Relative generates a relatively positioned element that is positioned relative to its normal position.
  the Overflow:hidden//overflow property stipulates what happens when the content overflows the element box. Hidden content is trimmed and the rest is not visible.
}

Look at the page style:

See all the pictures are gone together, the picture itself is greater than the width of the Div, so overflow:hidden this on the other overflow will not show, but this is certainly not what we want, not in a hurry to continue;
Then, we now control the UL style:

. Pic-slider-io ul{
  margin:0px//Setting the outer margin of the top and bottom is all 0;
  padding:0px;//setting up and down the inner margin is 0;  Note: The margin,padding setting is: On　　, right, down, left, such as margin:2px,4px,5px,8px, respectively, up, right, down, left;
  Height:auto;　　Adaptive height, the browser automatically calculates
  width:100%; 　　　　Width of 100%
  list-style-type:none;　　Remove the Li point from the
  float:left;　　
  Display:block; This element is displayed as a block-level element, preceded by a newline character
  position:absolute;//to generate an absolutely positioned element, positioned relative to the first parent element other than static positioning.
  top:0;
  left:0;
  The Z-index:98;//z-index property sets the stacking order of the elements. Elements that have a higher stacking order are always in front of elements that have a lower stacking order.
}

This time the picture is not displayed, the page is to see the upper left corner of the point removed;

Again, we control the style of Li:

. Pic-slider-io ul li {
  height:auto;
  width:100%;
  Float:left;
  padding:0px;
  margin:0px; 
  Overflow:hidden;
  Z-index:1; This Li layer is higher than that of the UL stack.

This style of setting is mainly to put Li's stack above the UL is equivalent to floating in the UL above;

Finally, let's look at the img style:

. Pic-slider-io ul Li img{ 
  width:100%;
   z-index:1;//set the picture and Li on the same floor, this should be no problem.

Now let's take a look at what the page looks like:

See, after the style set, the whole picture is displayed;

Step Three: Write Scrollpic.js
In the writing JS, we want to add the right bottom of the picture digital display, we have to add in advance of the CSS to write as follows:

. pic-page-btn {//This is the child div style in the parent Div, used to display the Digital bearer module Float:left in the lower right corner
  ;
  Width:auto;
  height:30px; 
  Position:absolute; 
  bottom:20px; 
  right:20px;
  z-index:99; His stack is taller than the parent Div, and put the button style above the picture
}
. pic-page-btn span{//This is the number style height:30px to set the sub div
  ;
  width:30px;
  Background-color: #999;
  Display:block;
  Float:left;
  line-height:30px;
  Text-align:center;
  Color: #FFF;
  margin-right:10px;
  Cursor:pointer
}
. Pic-page-btn. Current {//This is going to set the mouse over to change its background color
  background-color: #1D5D76;
}

Below, we look at the writing of JS, here is not a video, it is not a step-by-step talk, I have interpreted all the comments in the JS code

JS Code:

$ (function () {$.scrollpic = function (options) {//defines a scrollpic function with a parameter to invoke;/************************ start the entire default plug-in parameter
      Explain *******************************////whole defaults with curly braces contains the default parameters, invoke this plugin only need to modify the Ele,time,autoscroll; var defaults={  Ele: '. Pic-slider-io ',//pic-slider-io is a class,css that defines its style; Time: ' Yes ',//time defines the timing of the slide; AutoScroll
    : True//autoscroll set to True to automatically toggle pictures; /************************ ends the entire default plug-in argument *******************************///$.extend ({},defaults, option) has {} is mainly to create a
    A new object that retains the default value of the object.
    
    var opts = $.extend ({}, defaults, options); $ (Opts.ele) can be understood as taking this execution, with the $ ('. Class1 '). Click (), similar representations, and then understood as assigning to picobject;//or so, $ (Opts.ele) is $ ('. Pic-slider-io ')
    
    , but (. Pic-slider-io is a class as a parameter, so (Opts.ele) to represent); var picobject = $ (Opts.ele); Picobject.find (' ul '), this can be understood as $ (opts.ele). Find (' ul '), because Opts.ele is actually acquired a class,//equivalent to $ ('. Pic-slider-io '). See (' UL '); then assign the value to scrolllist, so the whole is expressed by scrolllist; var scrolllist = PicobjEct.find (' ul '); The same scrolllist.find (' Li ') can be expressed as $ ('. Pic-slider-io '). Find (' ul '). Finding (' Li '); So this is a layer to look up. If you see HTML it will be clearer; var Listli
    
    = Scrolllist.find (' li ');
    
    The name of the picture is 1.jpg,2.jpg, so that index is used to indicate that the name of the image is initialized with a value of 0; var index = 0;
    
    This is the function that defines a pictimer (automatic switching function); var Pictimer;
    
    An li contains a picture, so this is how many pictures are found, assigned to Len; var len = picobject.find (' li '). length; /***************** starts automatically switching functions ************************/function Pictimer () {showpic (index);//Calling the Showpic (index) function (below
      ) index++;
      if (index = = len) {//If the value of index equals Len, it means the switch from the first picture to the last picture is finished, then the index assignment is 0 to restart the index=0; 
    /***************** End Auto Switch function ************************///setinterval () method to call a function or evaluate an expression in the specified period (in milliseconds). The SetInterval () method keeps calling the function until the clearinterval () is called or the window is closed//This is judged to be true, the Pictimer function is called continuously, and the time is invoked at the speed of I F (opts.autoscroll) {var time = setinterval (pictimer,opts).
    Time); /***************** Start Animation function/function Showpic (index) {//Define animation function//listli is to find the first Li, then hide him, Listli in var Listli = Scrolllist.find (
      ' Li '); Listli.hide () has been introduced; The FadeIn () method uses a fade effect to display the selected element, if the element is hidden.
      The siblings () method is traversal.
      Listli.eq (Index). FadeIn. Siblings (). Hide ();
      Find the CSS style for the paging, and if it matches the current index, add a CSS style with the class, or remove it.
    Picobject.find (paging). EQ (index). addclass ("current"). Siblings (). Removeclass (' current '); 
    /***************** End Animation Function ************************///This is a child div that adds a class to pic-page-btn in a div with class Pic-slider-io.
    
    The main is to set the lower right corner of the digital bearing picobject.append (' <div class= ' pic-page-btn "); In this class for the pic-page-btn of the child div add the number of numbers corresponding to the number of pictures, 1,2,3,,,,,//From this can be seen, the number is not their own Tim, is based on the number of Li, that is, the number of pictures automatically generated for (i=1;i<
    =len;i++) {picobject.find ('. pic-page-btn '). Append (' <span> ' +i+ ' </span> ');
    
    }//This is the same as the above said Listli var paging = Picobject.find ('. pic-page-btn span '); Change the background color paging for the corresponding lower-right corner of the number.EQ (index). addclass (' current '); }
});

Here we are almost done with the picture switching,

Then we first call the default look in HTML:

Call Mode:

<script type= "Text/javascript" >
$ (function () {
    $.scrollpic ();
  }); 
</script>

Look at the interface display:

Look at the arrows to show that you can automatically switch the picture;
But we also have when the mouse in the lower right corner of the 1,2,3,4, you can switch pictures, so we will add an event in JS can be:

  The mouse passes through 1, 2, 3, 4 effects
    picobject.find (paging). MouseOver (function () {
      index = picobject.find (paging). Index ( this));
      Showpic (index); Call the Showpic (index) function.
    });
    The mouse after 1, 2, 3, 4 effect
    
    //Clear Timer
    //When the mouse hovers over the 1,2,3,4, it is equivalent to switch the picture
    //So we will clear the timer,
    Picobject.hover ( function () {
      clearinterval (time);//This is relative to Setinterva ();
    },function () {
      if (opts.autoscroll) {
        Time = SetInterval (pictimer,opts. time);
      } else{
        clearinterval (time);
      }
    );

Add this code to JS, add to what position you don't say it! Add to

Paging.eq (Index). addclass (' current ');
The back is OK;

So the whole of this picture switching a plugin even if completed;
If you need to call a function, you can modify the Ele,timer,autoscroll.
Take a look at the use of Plug-ins with parameters:

<script type= "Text/javascript" >
 $ (function () {
    $.scrollpic ({
      ele: '. Pic-slider-io ',  // Plugin application div
      time: ' 3000 ',//     auto switch times
      autoscroll:true,    //Set whether automatic gradient
   }; 
</script>

Well, the whole plug-in is completed, I hope we can learn from the knowledge, if there is insufficient, but also hope understanding! (Finally, in the entire JS writing, preferably in the $ (function () {}), the first plus a semicolon to prevent conflicts with other JS)