"JavaScript" Original eco-compatible IE6 photo Carousel

"Bootstrap" Picture Carousel Component Carousel "(Click to open link) although done very well, but because only compatible to IE8, so it is useless. In fact, the original eco-compatible IE6 picture carousel is not as difficult as imagined, many of the online compatible IE6 picture carousel actually code is very bad. First reusability is very poor, do not know how to modify, and then add a lot of like the shutters of these dispensable special effects, the original short code is very poor, and finally, these things also directly with JavaScript to create components to show how powerful their JavaScript learning, Then do not teach others how to do, directly with a JS to write the entire Web page personally feel pretty bad, HTML, CSS, JavaScript three should be equals. In fact, with the "JavaScript" using getElementsByTagName and Getelementsbyname to improve the original eco-compatible IE6 tab (click to open the link) Inspired, this thing is simply easy to achieve.

I. BASIC OBJECTIVES

The following is WinXP in the IE6, of course, click on the bottom right corner of the 1,2,3,4 can automatically switch, most importantly, this thing can own carousel, you can see my IE6 has been inactive state. Then, the bottom left corner has the corresponding picture text description. You can completely change to some news pictures and news headlines, and even use php,jsp,asp to read pictures from the database, news updates to this component is no problem.

II. Basic Preparation

1, the following is my Site directory, in the WinXP system file C:\windows\wallpaper\web\ inside pull a few WinXP bring their own wallpaper. Used to do the above experiment. The files read by carousel.html are read from the IMGs.

2. The HTML and CSS layout codes are as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
The ID inside is for the following JavaScript script control, the rest of the layout ideas are as follows, using the "CSS" on the alignment of Div and page layout (click Open link) in the Layout method:


Third, the production process
After the layout is done, the JavaScript is created, the paging algorithm is switched or "JavaScript" uses getElementsByTagName and getelementsbyname to improve the original eco-compatible IE6 tab (Click to open the link) The idea of paging, just add a setinterval ("Auto_tab_div ()", 2000); Let the switch automatically. Don't dwell on it.
<script>function Div_tab (tabname) {var tablinkarr=document.getelementsbyname ("Tablink"); var tabPicArr= document.getElementById ("Tabpic"). getElementsByTagName ("div"); var Tabtextarr=document.getelementbyid ("Tabtext") . getElementsByTagName ("div"); for (Var i=0;i<tablinkarr.length;i++) {if (i==tabname) {tablinkarr[i].style.color= " #ff0000 "; tabpicarr[i].style.display=" block "; tabtextarr[i].style.display=" block ";} Else{tablinkarr[i].style.color= "#0000ff"; tabpicarr[i].style.display= "none"; tabtextarr[i].style.display= "None";}} var i=0;function auto_tab_div () {//If you switch to the last picture then re-start from the first if (i>3) {i=0;} Automatically reads the next picture every two seconds div_tab (i); i++;} SetInterval ("Auto_tab_div ()", "a");</script>
With the right ideas to guide you to this picture carousel where the position, the speed control of the carousel, add pictures, even changed to 200,000 pictures of the carousel, all this.

"JavaScript" Original eco-compatible IE6 photo Carousel