jquery realizes the detailed and instance code _jquery of the carousel diagram

Source: Internet
Author: User
Tags prev setinterval

Carousel Map:

I have been in touch with jquery for some time, and today I just use the carousel to practice practicing. The front of the blog will introduce a simple use of jquery to do a carousel diagram of the example, the middle will be inserted some more about the carousel diagram, in the following will be a JavaScript method to write a carousel diagram, and finally on the jquery and JavaScript comparison. The effect of the carousel map can be viewed by clicking on the link below: HTTP://SANDBOX.RUNJS.CN/SHOW/T07KSCPH

jquery makes a carousel diagram example:

HTML Section Code:

<! DOCTYPE html>  

CSS Part code:

* {
  margin:0;
  padding:0;
}

#igs {
  margin:10px auto;
  width:700px;
  height:320px;
  Position:relative
}

. IG {
  position:absolute;
}

#tabs {
  position:absolute;
  List-style:none;
  Background-color:rgba (255,255,255,.5);
  left:300px;
  bottom:10px;
  border-radius:10px;
  padding:5px 0 5px 5px;

tab{
  Float:left;
  Text-align:center;
  line-height:20px;
  width:20px;
  height:20px;
  Cursor:pointer;
  Overflow:hidden;
  margin-right:4px;
  border-radius:100%;
  Background-color:rgb (200,100,150);

btn{
  Position:absolute;
  Color: #fff;
  top:110px;
  width:40px;
  height:100px;
  Background-color:rgba (255,255,255,.3);
  font-size:40px;
  Font-weight:bold;
  Text-align:center;
  line-height:100px;
  border-radius:5px;
  margin:0 5px;

btn2{
  Position:absolute;
  right:0px
}

. btn:hover{
  Background-color:rgba (0,0,0,.7);
}

JS Part code:

Define global variable and timer var i = 0;

var timer;
  
  $ (document). Ready (function () {///Set first picture shown with jquery method, remaining hidden $ ('. IG '). EQ (0). Show (). Siblings ('. Ig '). Hide ();
  
  Call the ShowTime () function (the Carousel function) ShowTime ();
    When the mouse passes the following number, it triggers two events (mouse hover and mouse left) $ ('. tab '). Hover (function () {//Get the current value of I and display it, and also clear the timer i = $ (this). index ();
    Show ();
  Clearinterval (timer);
  },function () {//ShowTime ();
  
  });
    Mouse click on the left arrow $ ('. Btn1 '). Click (function () {clearinterval (timer);
    if (i = = 0) {i = 5;//Note the value of I at this time} i--;
    Show ();
  ShowTime ();
  
  });
    Mouse click on the right Arrow $ ('. Btn2 '). Click (function () {clearinterval (timer);
    if (i = = 4) {i = -1;//Note the value of I at this time} i++;
    Show ();
  ShowTime ();
  
});


});
    Create a ShowTime function ShowTime () {//Timer timer = setinterval (function () {//Call a show () function show ();
    i++;
    When the picture is the back of the last one, set the picture to be the first if (i==5) {i=0;
}},2000); //Create a show function function Show () {//here can be animated with other jquery $ ('. IG '). EQ (i). FadeIn (SIBL).Ings ('. Ig '). fadeout (300);
  
  Give. tab to create a new class to add a new style to, and to set the style $ ('. tab ') in the CSS code. EQ (i). addclass (' BG '). Siblings ('. tab '). Removeclass (' BG ');
   * * Code added in/* CSS: *. bg{background-color: #f00;} * */
}

Complete the effect diagram:

To complete the effect, click the link below to see: HTTP://SANDBOX.RUNJS.CN/SHOW/T07KSCPH

About jquery doing carousel map more thinking

Thinking one: In the seventh line of code in the jquery method to set the first picture shows that the rest of the hidden, we have no other way to achieve?

Idea: Through the jquery filter to achieve

code example:

$ ("#igs A:not (: First-child)"). Hide ();

Extension: In this case, we can omit the class in the a tag, and at the same time we have a deeper understanding of the jquery selector.

Thought two: In the 64th line of code, we created a show function, where we can only see the simple effect, we can make our animation effect more dazzling?

Idea: Use the Custom Animation in jquery to set multiple animation effects for it

code example:

Code hint: can use Fadein (), fadeout (), Fadeto (), animate () and so on, the concrete realization method please consult the relevant information

Think three: If we are on the original basis of adding one or more pictures, we have to modify our code, we can apply the code to more of the carousel map?

Train of thought: we set up a counter count in front, get the number of pictures through the DOM method

code example:

var count;
$ (document). Ready (function () {
  count= $ (". Main a"). Length;/* Give the dynamically changing I standby * * *;
  。。。 Code omitted
  
  //mouse click on the left arrow
  $ ('. Btn1 '). Click (function () {
    clearinterval (timer);
    if (i = = 0) {
      i = count;//Note the value of I at this time
    }
    i--;
    Show ();
    ShowTime ();
  });
  
  Mouse click on the right arrow
  $ ('. Btn2 '). Click (function () {
    clearinterval (timer);
    Console.log (count-1);
    if (i = = count-1) {
      i = -1;//Note the value of I at this time
    }
    i++;
    Show ();
    ShowTime ();
  });
  

Write a simple carousel diagram with the native JavaScript method

HTML Section Code:

<div id= "Container" >
  <div id= "list" style= "left: -600px;" >
      
     " 
    
  </div>
  <div id=" Buttons ">
    <span index= "1" class= "on" ></span>
    <span index= "2" ></span>
    <span index= "3" ></span>
    <span index= "4" ></span>
    <span index= "5" ></span>
  </ div>
  <a href= "javascript:;" id= "prev" class= "Arrow" ><</a>
  <a href= "javascript:;" id= "Next" class= "Arrow" >></a>
</div>

JS part of the code:

<script type= "Text/javascript" >/* Knowledge Point: *//////* DOM Event////////* Timer/* Windo
      W.onload = function () {var container = document.getElementById (' container ');
      var list = document.getElementById (' list ');
      var buttons = document.getElementById (' buttons '). getElementsByTagName (' span ');
      var prev = document.getElementById (' prev ');
      var next = document.getElementById (' Next ');
      var index = 1;
      var timer; function animate (offset) {//Gets the Style.left, is the relative left to get the distance, so the first picture after the style.left are negative,//and Style.left get the string, you need to use parse
        Int () Rounding is converted to a number.
        var newleft = parseint (list.style.left) + offset;
        List.style.left = newleft + ' px ';
        Infinite scrolling judgment if (Newleft > -600) {list.style.left = -3000 + ' px ';
        } if (Newleft < -3000) {list.style.left = -600 + ' px '; } function Play () {//recurring timer timer = setinterval (function (){Next.onclick ();
      }, function Stop () {clearinterval (timer);  function Buttonsshow () {//Clears the previous DOT's style for (var i = 0; i < buttons.length; i++) {if (Buttons[i].classname = "on")
          {buttons[i].classname = "";
      }//array starting from 0, so index need-1 buttons[index-1].classname = "on";
        } Prev.onclick = function () {index = 1;
        if (Index < 1) {index = 5} buttonsshow ();
      Animate (600);
      };
        Next.onclick = function () {//due to the function of the top timer, the index will continue to increase, we have only 5 small dots, so we need to make a judgment index = 1;
        if (Index > 5) {index = 1} animate (-600);
      Buttonsshow ();
      };
            for (var i = 0; i < buttons.length i++) {(function (i) {Buttons[i].onclick = function () {
       * Here to get the mouse to move to a small dot position, with this to the index binding to the object Buttons[i], go to google this usage * *     /* Because the index here is a custom attribute, you need to use the DOM2-level method of getattribute () to get the properties of the custom index */var clickindex = parseint (this.getattrib
            Ute (' index ')); var offset = * (Index-clickindex);
            This index is the index animate (offset) at the time the current picture is staying; index = Clickindex;
          Store the position of mouse click, used for the normal display of small dots buttonsshow ();
      }) (i)} container.onmouseover = stop;
      Container.onmouseout = play;
    Play ();
 } </script>

A comparison of jquery and JavaScript methods

By comparison, it is not hard to see that the jquery approach is much less than the code written by our JavaScript method. In fact, you omit a lot of problems directly with JavaScript, for example, the compatibility problem (the example does not test, it is used for comparison), and if the value of class is two and the middle is separated by a space, what do we do with Dom (thinking: using regular expressions and arrays of related methods) , so we have more code, if we want to change the animation effect, we need to modify a lot of places, and from the previous introduction, we know, want to modify the animation effect directly modify the call animation function on the line ...

After the words:

This blog logs a little more thinking, and many of these methods have not yet been written. Now learning jquery While reviewing the previous study of JavaScript, more and more feel that JavaScript is strong (in fact, it is a weak burst), a lot of things are worth to delve into, more and more feel this thing interesting.

Thank you for reading, I hope to help you, thank you for your support for this site!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.