JS simplest focus picture Carousel code

Save the following code as Banner.js, and call the JS where you need to display the focus map.

<script type= "Text/javascript" src= "Banner.js" ></script>

Note: The image path in the code is modified to be your own image address

varwidths=725;//Focus Picture WidthvarW=0;varwidthss=widths+W;varheights=295;//Focus Picture Highvarheightss=heightss+W;varHeightt=20;varcounts=3;//total number of bars//img1=new image (); Here is the object that declares a picture element//The following is an assignment or setting of an image's properties, such as imgs.src= "Xxxx.jpg", which is the index address of the specified picture.//This code is typically used for the head area, which is used to preload images, which speeds up the display of images.//only the picture IE7 with the new Images () will be recognized,//and IE6 and Firefox can recognize imgurl[1]= "/xxxx.jpg"; get the pictureIMG1=NewImage (); img1.src= ' Images/banner1.jpg '; URL1=NewImage (); url1.src= ' # '; Txt1=NewImage (); txt1.txt= "; Img2=NewImage (); img2.src= ' Images/banner2.jpg '; Url2=NewImage (); url2.src= ' # '; Txt2=NewImage (); txt2.txt= "; IMG3=NewImage (); img3.src= ' Images/banner3.jpg '; Url3=NewImage (); url3.src= ' # '; Txt3=NewImage (); txt3.txt= "; varNn=1;//the currently displayed scroll chartvarkey=0;//identifies whether to start execution for the first timevartt//identification Functionfunctionchange_img () {if(key==0) {Key=1;}//if Key=1 is executed for the first time, it indicates that it has been executed once. Else if(document.all)//document.all only Ie6/7 know, Firefox will not execute this part{document.getElementById ("Pic"). Filters[0]. Apply ();//apply a filter to the image on thedocument.getElementById ("Pic"). Filters[0]. Play (duration=2);//Start Conversiondocument.getElementById ("Pic"). Filters[0]. transition=23;//Conversion Effect}eval (' document.getElementById ("pic"). Src=img ' +nn+ '. src ');//Replace pictureEval (' document.getElementById (' url '). Href=url ' +nn+ '. src ');//Replace URLEval (' document.getElementById ("title"). Value=txt ' +nn+ '. txt ');//Replace Alt for(vari=1;i<=counts;i++) {document.getElementById ("XXJDJJ" +i). Classname= ' Axx ';//Turn all links on the black bar below to the unchecked state}document.getelementbyid ("XXJDJJ" +nn). Classname= ' bxx ';//sets the ID of the current page to the selected statenn++;if(nn>counts) {nn=1;}//if the ID is greater than the total number of pictures. Start the loop from the beginningTt=settimeout (' change_img () ', 4000);//the Change_img () method is re-executed after 4 seconds.}functionCHANGEIMG (N)//Click on the link on the black bar to perform the method. {nn=n;//the ID of the current page equals the incoming n value,Window.clearinterval (TT);//clear the TT for the Loop//change_img () is re-executed, but the image ID that is called in change_img () has been modified here and will start at the new ID.change_img ();}//style sheetdocument.write (' <style> '));d Ocument.write ('. axx{padding:1px 7px;font-size:12px;} ');d Ocument.write (' A.axx:link,a.axx:visited{text-decoration:none;color: #fff; line-height:12px;font:9px Sans-serif;background-color : #666;} ');d Ocument.write (' A.axx:active,a.axx:hover{text-decoration:none;color: #fff; line-height:12px;font:9px Sans-serif;background-color : #999;} ');d Ocument.write ('. bxx{padding:1px 7px;} ');d Ocument.write (' A.bxx:link,a.bxx:visited{text-decoration:none;color: #fff; line-height:12px;font:9px Sans-serif;background-color : #009900;} ');d Ocument.write (' A.bxx:active,a.bxx:hover{text-decoration:none;color: #fff; line-height:12px;font:9px Sans-serif;background-color : #ff9900;} ');d Ocument.write (' </style> ');//Content Sectiondocument.write (' <div style= ' width: ' +widthss+ ' px;height: ' +heights+ ' px;overflow:hidden;text-overflow:clip; Float:left; " > ');d Ocument.write (' <div><a id= ' url "target=" _blank "></a ></div> ');d Ocument.write (' <div style= ' Filter:alpha (style=1,opacity=10,finishopacity=90); background:transparent;width:100%-2px; text-align:right;top:-14px;position:relative;margin:0px;height:14px;border:0px;padding-top:1px;z-index:4000; " ><div> '); for(vari=1;i<counts+1;i++) {document.write (' <a href= "javascript:changeimg (' +i+ ');" id= "Xxjdjj ' +i+ '" class= "Axx" target= "_self" > ' +i+ ' </a> ');} document.write (' </div></div></div> ');d Ocument.write (' <div align=center style= ' Display:none; ><input id= "title" type= "TXT" style= "Height:20px;background-color: #f2f6fb; border:0px solid #f2f6fb; width: ' + Widthss+ ' Px;color: #ff8800; font-size:9pt;position:relative;padding-top:1;text-align:center; " ></div> ');//document.write (' </div> ');//Start a scrolling operationChange_img ();