Hello Js

导航

临时记录的

哭 没调出来 笨啊笨

记录下来 明天继续 没办法 后天就上线了。

<!DOCTYPE html>
<html>
<head>
    <title> fade in</title>
    <style>
    #out{width:600px; height:200px;margin:0 auto; border:1px solid #333; overflow:hidden}
    #out ul{margin:0; padding:0;position:relative;}
    #out li{list-style:none;float:left;position:absolute;}
    </style>
</head>
<body>
<div id="out">
<ul>
<li><a href="javascript:void(0)"><img src="images/1.jpg" width="600" height="200"/></a></li>
<li><a href="javascript:void(0)"><img src="images/2.jpg" width="600" height="200"/></a></li>
</ul>
</div>
<ul >
<li><a href="javascript:void(0);" onclick="showCertainImage(0)">0</a></li>
<li><a href="javascript:void(0);" onclick="showCertainImage(1)">1</li>
<li><a href="javascript:void(0);" onclick="showCertainImage(2)">2</a></li>
<li><a href="javascript:void(0);" onclick="showCertainImage(3)">3</a></li>
</ul>
</body>
<script>
    function Id(name){
        return document.getElementById(name);
    }    
    function setOpacity(ev, v){
        ev.filters ? ev.style.filter = 'alpha(opacity=' + v + ')' : ev.style.opacity = v / 100;
    }
        
    var out = Id("out");
    var li = out.getElementsByTagName('li');
    var len = li.length;
    var isFirst = true;

    function init(){
        for(var i=0; i<len; i++){
            setOpacity(li[i], 0);
            li[i].style.zIndex = len-i;
        }
        setOpacity(li[0],100);
    }
    
    var index = 0;
    function fadeIn(){
         var num = 100;
          addTimer = setInterval(function(){
            if(num<=0){
                clearTimeout(addTimer);
            }
            setOpacity(li[0],num);
            //setOpacity(li[next],n);


            num-=10;     
            //n += 10;
        },100);   
    }

    function change(){
        init();
        fadeIn();
    }
  
  /*  function fadeIn(index, next){        
        var num = 100;
        var n = 0;
        
        addTimer = setInterval(function(){
            if(num<=0){
                clearTimeout(addTimer);
            }
            setOpacity(li[index],num);
            //setOpacity(li[next],n);

            num-=10;     
            //n += 10;
        },100);        
    }
*/
    

    change();
   /* var index = 0;   
    function changeImage(){
        if (isFirst){
            init();
            isFirst = false;
        }
        if(index == len){
            index = 0
        }

        var next = index + 1;
        if(next== len){
            next = 0;            
        }

        timer = setTimeout(function(){        
          //  setOpacity(li[next], 100); 
            for(var i=0; i<len; i++){  
                li[i].style.zIndex = '';
            }

            li[index].style.zIndex = len;    
            li[next].style.zIndex = len-1;

             fadeIn(index, next); 
             setOpacity(li[next], 100); 

            index++;
            
            changeImage();
        },3000)            
    }
    
    //  changeImage(); //自动轮播的入口;

   /* function showCertainImage(index){ //点击改变图片的入口；
        if(timer){
            clearTimeout(timer);
        }    
        var next = index+1;
        if(next == len){
            next = 0;            
        }
        for(var i=0; i<len; i++){
            li[i].style.zIndex = '';
        }
        li[index].style.zIndex = 2;            
        setOpacity(li[index], 100);
        
        changeImage(index);
    } 
    */
  
</script>
</html>

posted on 2012-11-07 23:06  苏拉A梦  阅读(108)  评论(0)  编辑  收藏  举报