Brief analysis of JavaScript tabs and carousel diagrams

Options tab

Ideas

1, buttons and display of the page to correspond: Traverse, remember the index of the current button, so that it becomes the index of the display page

2. Only the corresponding page appears: all the pages are hidden, only the desired page is displayed.

Show only JS code

       for (var i=0;i<input.length;i++) {                  input[i].index=i           //To have the browser parse an HTML document, save the index of each input                      input[i]. Onclick=function() {                        for (Var j=0;j<div.length;j++) {   //all div for hidden                             div[j].style.display= ' None '                              input[j].classname= '                       }                      div[this.index].style.display= ' block '//show only the corresponding page                      This.classname= ' active '                  }         }    

Carousel Diagram

Ideas

A complete carousel diagram contains: AutoPlay, mouse move-in removal start pause, buttons on both sides, small carousel below

AutoPlay: Involves timers,

Move in Remove: MouseOver and Mouseout events, start/Cancel Timer

Buttons on both sides: move left and right, ++--, picture and carousel points correspond

The following carousel: similar to Tabs

The overall idea and the tab is similar, but the subtle place still has to pay attention to

Provisions

Imdiv as a collection of picture Div

Imgspan as a collection of small carousel points

One is right-click-left

Code

function Changeimage () {for              (var i=0;i<imdiv.length;i++) {                    imdiv[i].style.display= ' none '                     imgspan[i].style.background= ' #ccc '              }              imdiv[index].style.display= ' block '              imgspan[ index].style.background= ' green '      

This part is to change the color of the picture and the small carousel: the principle and the Carousel diagram, first let all disappear and the original color; Note The index here starts at 0.

for (var i=0;i) {             imgspan[i].id=i             imgspan[i].onclick=function() {                     index=this. ID                     changeimage ()             }        }   

Here is part of the small-carousel Click event, in order to make it corresponding to the image, you can use the ID or their own setattribute attribute to remember the index, and then execute the carousel picture of the corresponding code

            Images.onmouseover=function() {                clearinterval (timer)              }            images.onmouseout=function() {                Timer=setinterval (function() {                      index++                      if (index>=imdiv.length) {                              index=0                      }                      changeimage ()                },2000)} images.onmouseout ()     

The code here is the mouseover and mouseout events, note the IF condition here, to prevent exceeding the expected picture; The following img.onmouseout executes directly from the beginning.

             One.onclick=function() {                   index++                   if (index>=imdiv.length) {                           index=0                   }                    Changeimage ()             }             two.onclick=function() {                   index--                   if (index<=0) {                           index=2 } changeimage ()}     

The code here is the button click on both sides of the event, the principle is the same, because when you click, the timer is still running, resulting in a bad user experience, you can let its mouseover and mouseout let the timer shut down and start to achieve a good user experience.

Summary

First: Whether it is a tab, or Carousel diagram, the idea is roughly the same, are hidden first, who should appear who appears;

Second: The rotation of the carousel diagram is encapsulated into a function that requires a direct call to

Third: Pay attention to the corresponding index, the flexible application of attributes

IV: Fall in love with native JavaScript.

Pretty funny!

Brief analysis of JavaScript tabs and carousel diagrams