Picture switch case

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
ul { padding:0; margin:0; }
li { list-style:none; }
body { background:#333; }
#pic { width:400px; height:500px; position:relative; margin:0 auto; background:url(img/loader_ico.gif) no-repeat center #fff; }
#pic img { width:400px; height:500px; }
#pic ul { width:40px; position:absolute; top:0; right:-50px; }
#pic li { width:40px; height:40px; margin-bottom:4px; background:#666; }
#pic .active { background:#FC3; }
#pic span { top:0; }
#pic p { bottom:0; margin:0; }
#pic p,#pic span { position:absolute; left:0; width:400px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; }
</style>
<script>
window.onload = function (){
    var oDiv = document.getElementById('pic');
    var oImg = oDiv.getElementsByTagName ( ' img ' ) [ 0 ];
    var oSpan = oDiv.getElementsByTagName ( ' span ' ) [ 0 ];
    var oP = oDiv.getElementsByTagName ( ' p ' ) [ 0 ];
    var OUL = oDiv.getElementsByTagName ( ' l ' ) [ 0 ];
    var ali = oUl.getElementsByTagName ( ' if '); 
    
    Var arrUrl = [ ' IMG / 1.png ' , ' IMG / 2.png ' , ' IMG / 3.png ' , ' IMG / 4.png ' ];
     var arrText = [ ' pokemons ' , ' Photos two ' , ' image for three ' , ' mask ' ];
     var NUM =  0 ;
     var oldLi =  null ; 
    
    for (var I = 0 ; I < arrUrl.length; I ++ ) { 
        oUl.innerHTML + =  ' <Li> </ Li> ' ; 
    } 
　　// After must create Li 
    oldLi = aLi [NUM]; 
    
    // initialize 
    oImg.src = arrUrl [NUM]; 
    oSpan.innerHTML =  . 1 + NUM + ' / ' + arrUrl.length; 
    oP.innerHTML = arrText [NUM]; 
    aLi [NUM] .className =  ' Active ' ;
    
    for( var i=0; i<aLi.length; i++ ){
        aLi[i].index = i;            // 索引值
        aLi[i].onclick = function (){
            oImg.src = arrUrl[ this.index ];
            oP.innerHTML = arrText[ this.index ];
            oSpan.innerHTML = 1+this.index + ' / '+arrText.length;
            
            /*
                <Li class = "Active"> </ Li> 
                <Li> </ Li> 
                <Li> </ Li> 
                <Li> </ Li> 
            * / 
            
            // idea of a: all the empty, add the current 
            // for (var 0 = I; I <aLi.length; I ++) { 
            //      aLi [I] .className = ''; 
            // } 
            // this.className = 'Active'; 
            
            
            // idea II: the last emptied, the current adding 
            oldLi .className =  '' ; 
            oldLi =  the this ;
             the this .className =  ' Active ' ; 
            
        };
    }
};
</script> 
</ Head > 

< body > 

< div ID = "PIC" > 
    < IMG the src = ""  /> 
  < span > quantity is loading ...... </ span > 
  < P > text is loading ...... </ P > 
  < UL > </ UL > 
</ div > 

</ body > 
</ HTML >
Guess you like
