Home > Developer > Web Develop
1.
2.
<! DOCTYPE html>"en">"UTF-8"> <title>Title</title> <style>ul {padding:0; Margin0; } Li {List-Style:none;} Body {background:#333; } . box {width:400px; height:500px; position:relative; Background:url (img/2. png) No-repeat Center #fff;float: Left; margin-right:60px;} . box img {width:400px; height:500px;} . box ul {width:40px; position:absolute; Top:0; right:-50px;} . box Li {width:40px; height:40px; margin-bottom:4px; background:#666; } . box. Active {background: #FC3;} . Box span {top:0; } . box p {bottom:0; Margin0; } . Box P,.box span {position:absolute; Left:0; width:400px; height:30px; line-height:30px; Text-align:center; Color: #fff; background:# the; } </style><body><div id="Pic1" class="Box"> ""/> <span> Quantity loading in ......</span> <p> text description loading in ......</p> <ul></ul></div><div Id="Pic2" class="Box"> ""/> <span> Quantity loading in ......</span> <p> text description loading in ......</p> <UL></UL></DIV><SCRI Pt>/*Reuse Code: 1, as far as possible to ensure the structure of the HTML code consistent, can be selected by the parent sub-element 2, the core main program implementation, with the function of 3, each group of different values to find out, through the implementation of 4. The formal parameter name of the common method should not be used with the calling argument Name consistent, serious attention! Sometimes there will be inexplicable mistakes also found not!!! */window.onload=function () {varARRIMG1 = ['Img/1.png','Img/2.png','Img/3.png','Img/4.png' ]; varARRTEXT1 = ['Small Pets','Picture Two','Picture Three','Mask' ]; Fntab ('Pic1', ARRIMG1, Arrtext1,'onclick' ); Fntab ('Pic2', ARRIMG1, Arrtext1,'onmouseover' ); }; //note oimg and other elements are found from the Odiv, not from the document to find!!! function Fntab (ID, Arrurl, arrtext, evt) {varOdiv =document.getElementById (ID); varOimg = Odiv.getelementsbytagname ('img')[0]; varOspan = Odiv.getelementsbytagname ('span')[0]; varOP = Odiv.getelementsbytagname ('P')[0]; varOul = Odiv.getelementsbytagname ('ul')[0]; varALi = Oul.getelementsbytagname ('Li'); varnum =0; Createli (Oul); //according to the number of pictures under UL to create a corresponding number of Li loading pictures withinit (num);//change the picture's display by the image's subscriptlistenevent (); //Create a child node Lifunction Createli (parentobj) {varlihtml ="'; for(varI=0; i<arrurl.length; i++) {lihtml+='<li></li>'; } parentobj.innerhtml=lihtml; } //Initializefunction init (index) {oimg.src=Arrurl[index]; Ospan.innerhtml=1+index+' / '+arrurl.length; Op.innerhtml=Arrtext[index]; for(varI=0; i<ali.length; i++) {Ali[i].classname="'; } ali[index].classname='Active'; } //Monitoring Eventsfunction Listenevent () { for(varI=0; i < ali.length; i++) {Ali[i].index= i;//Index ValueALI[I][EVT] =function () {init ( This. index);//num = this.index; init (num); }; } } }</script></body>Js-03 class-click or swipe on 42 groups of pictures
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
