JS Beginner--Add index match array exercises

1. Page layout

　　

<DivID= "Wrap">            <imgsrc=""/>            <span>The number of pages is loading ...</span>            <P>The picture description is loading:</P>            <ul></ul>        </Div>

View Code

2. Add Style

<style type= "text/css" > Li{List-style:None;}ul{margin:0;padding:0;}P{margin:0;}Body{background:#333; }#wrap{margin:0 Auto;position:relative;Height:500px;width:400px;Border:1px solid #f8f812;background:url (' img/loader_ico.gif ') no-repeat Center; }#wrap img{Height:500px;width:400px;text-align:Center;position:Absolute; }#wrap span, #wrap p{Height:30px;width:400px;position:Absolute; Left:0;Line-height:30px;text-align:Center;background:#fff; }span{Top:0;}P{Bottom:0;}ul{position:Absolute;Top:0; Right:-30px;}Li{Height:20px;width:20px;background:#666;Margin-top:2px; }. Active{Background-color:Yellow;}</style>

View Code

　　

3. Write JS code

<script type= "Text/javascript" >varArrimg = ["Img/1.png", "Img/2.png", "Img/3.png", "Img/4.png"]            varArrname = ["First sheet", "second sheet", "third", "fourth"]            varnum = 0; varOldli =NULL; varOdiv = document.getElementById ("Wrap"); varoimg = Odiv.getelementsbytagname ("img") [0]; varOspan = Odiv.getelementsbytagname ("span") [0]; varOP = Odiv.getelementsbytagname ("P") [0]; varOul = Odiv.getelementsbytagname ("ul") [0]; varALi = Odiv.getelementsbytagname ("li");  for(varI =0;i<arrimg.length;i++) {oul.innerhtml+ = "<li></li>"; } Oldli=Ali[num]; //InitializeOIMG.SRC = ' Img/1.png '; Op.innerhtml=Arrname[num]; Ospan.innerhtml= num+1 + "/" +arrimg.length; Ali[num].classname= "Active";  for(vari=0;i<arrimg.length;i++) {Ali[i].index=i; Ali[i].onclick=function() {oimg.src= arrimg[ This. index]; Op.innerhtml= arrname[ This. index]; Ospan.innerhtml= 1+ This. Index + "/" +arrimg.length; Oldli.classname= ""; Oldli= This;  This. ClassName = "Active"; }            }        </script>

View Code

To write the JS code, first get all the elements, get the div by ID, then through Div.getelmentsbytagname (), get the element under the DIV, note the value "0" that corresponds to each element, define the array, and set num = 0; Add an Li tag that corresponds to the number of arrays, initialize the entire Div, the first page, and then add a click event to all the LI tags through a for loop, add an index to the Li tag before adding the Click event, and each value of the array; the last step is to set the properties for the Li tag. The current option background is yellow, first defining an empty element, and then adding an existing Li tag to an empty element when the Li tag is added, adding a post-click attribute to the original Li tag during initialization, by adding the class name In the Click event of the Li tag, the properties that were generated when the Li tag was clicked are cleared and the properties of the clicked attribute are set for the currently clicked Li Tag.

4. Realize the effect

　　

Issues to note: 1, in the process of adding Li Tags: + = To achieve the insertion of multiple Li tags.

 for (var i =0;i<arrimg.length;i++) {                + = "<li></li>";            }

2. Realize the Background property of the Li tag before clicking on the next Li tag can also be cleared and added by the For loop.

 for (i=0;i<ali.length;i++) {                        = "";                    }                     this. ClassName = "active";

If you clear the attribute in this way, you do not need to set oldli = null again;

JS Beginner--Add index match array exercises