Native JavaScript and jquery do a simple example of a carousel diagram _javascript tips

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.

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 of the 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 used with other jquery animations $ ('. IG '). EQ (i) fadeIn (300). Siblings ('. Ig ') Give. tab to create a new class to add a new style to it, 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:

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/* window.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, need to use parseint ()
 The rounding is converted to numbers.
 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);
  The function buttonsshow () {//Clears the style of the previous dot 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 () {/*) get the position where the mouse moves to the dot, with This binds index to object Buttons[i], go to google this usage * * * * Because the index here is a custom attribute, you need to use the getattribute () This DOM2-level method to get the properties of the custom index * * var
  Clickindex = parseint (This.getattribute (' 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>

For more information on JavaScript animations, please refer to:

JavaScript animation effect One

JavaScript animation effect Two

JavaScript animation effect Three

JavaScript animation effect Four

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.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.