2017-3-30 JS Implementation navigation bar, tab, picture Carousel production

(a) The production of navigation bar

Show the effect:

<! DOCTYPE html>. div1 {width:100px;            height:30px; Background-color:red; float: Left; Margin-right:10px;        position:relative;            }. div2 {width:100px;            height:230px; Background-Color:yellow; float: Left; Margin-right:10px;            Position:absolute;            top:30px;        Display:none; }    </style>varA = Document.getelementsbyclassname (' Div1 '); varb = document.getelementsbyclassname (' Div2 ');  for(vari = 0; i < a.length; i++) {        //Mouse Move inA[i].index = i;//record a value of type int so that DIV1 and div2 correspond to the corresponding drop-down menu when the mouse is moved into the removalA[i].onmouseover =function() {a[ This. Index].style.backgroundcolor = ' black ';//Div1 Color When mouse is moved inb[ This. Index].style.display = ' block '; }        //Mouse RemovalA[i].onmouseout =function() {a[ This. Index].style.backgroundcolor = ' red ';//Div1 restores the original color when the mouse is removedb[ This. Index].style.display = ' None '; }    }</script>

(ii) Creation of the tab

Click on the navigation bar, the content in the div changes, the change is replaced by the number

CSS style:

. div1 {    width:100px;    height:30px;     float : Left;    Margin-right:10px;    Background-color:red;}. div2 {    top:40px;    Background-color:blue;    width:540px;    height:300px;    Position:absolute;    Z-index:100;
}

JS Code div Content:

<! DOCTYPE html>varA = Document.getelementsbyclassname (' Div1 '); varb = document.getelementsbyclassname (' Div2 '); varCount = 102;  for(vari = 0; i < a.length; i++) {                //Mouse Move inA[i].onmouseover =function () {                        if( This. style.backgroundcolor! = ' Black ') {//when the mouse moves in, it turns yellow as long as it's not black.                 This. Style.backgroundcolor = ' Yellow '; }        }        //Mouse Move outA[i].onmouseout =function () {            if( This. Style.backgroundcolor = = ' Yellow ') {                 This. Style.backgroundcolor = ' Red '; }        }        //Mouse clickA[i].index = i;//must be placed outside of the click event for a count comparisonA[i].onclick =function () {                         for(varj = 0; J < a.length;j++) {A[j].style.backgroundcolor= ' Red '; }             This. Style.backgroundcolor = ' black '; //Tab Toggleb[ This. Index].style.zindex =count; Count++; }                }</script>

(iii) Picture Carousel

Display effect:

　　

CSS style sheet:

　　

. div1 {   width:730px;   height:336px;    position:relative;   Background-color:red;}    . Div1 img {        width:100%;        Height:100%;        Position:absolute;        Display:none;    }. but {    width:40px;    height:50px;    Background-color: #808080;    Z-index:1000;    Position:absolute;    Top:50%;    Margin-top:-25px;    Font-size:30px;    line-height:50px;    Font-weight:bold;    Text-align:center;    Cursor:pointer;}

JS and content:

　　

<! DOCTYPE html>varImages = Document.getelementsbyclassname (' img '); varCount = 0; //Left Slide Eventdocument.getElementById (' But_left '). onclick =function () {             for(vari = 0; i < images.length; i++) {Images[i].style.display= ' None '; } Count--; if(Count <0) {Count= Images.length-1; } Images[count].style.display= ' Block '; }        //Right Slide eventdocument.getElementById (' But_right '). onclick =function () {             for(vari = 0; I < images.length;i++) {Images[i].style.display= ' None '; } Count++; if(Count > (images.length-1) ) {count= 0; } Images[count].style.display= ' Block '; }   </script>

2017-3-30 JS Implementation navigation bar, tab, picture Carousel production