原创JS幻灯片效果,超少代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>哈哈</title>    
    <style type="text/css">
        .slider{
            width:400px;
            margin:auto;
        }
        
        ul li {
            list-style:none;            
        }
        li{
            float:left;
            position:absolute;
            display:none;
        }
    </style>
</head>
<body>
    <div class="slider">
        <ul>
            <li class="lis"><img src="http://img01.taobaocdn.com/tps/i1/T1ANWkXXVdXXXXXXXX-490-170.png"/></li>
            <li class="lis"><img src="http://i.mmcdn.cn/simba/img/T1Uw9kXjRXXXXXXXXX.jpg?noq=y"></li>
            <li class="lis"><img src="http://i.mmcdn.cn/simba/img/T1XMp7XidDXXXXXXXX.jpg?noq=y"></li>
            <li class="lis"><img src="http://i.mmcdn.cn/simba/img/T1Uzx7XjdpXXXXXXXX.jpg?noq=y"></li>
            <li class="lis"><img src="http://img02.taobaocdn.com/tps/i2/T1qzx7XdxBXXXXXXXX-490-170.jpg"></li>
        </ul>    
    </div>        
    <script type="text/javascript">
        var lis = document.getElementsByClassName('lis');
        var n=0;        
        var speed = 5000;        
        function show(y)        
        {    
            if(y)
            {
                n = y;
            }
            lis[n].style.display = "block";
            none(n);
            n++;
            setTimeout("show()",speed);
            if(n == lis.length)
            {
                n=0;
            }                                
        }            
        show();        
        
        function none(x)
        {
            for(var i=0;i<lis.length;i++)
            {
                if(i != x)
                {
                    lis[i].style.display = "none";    
                }                
            }
        }    
        
        
        function show_num()
        {
            for(var d=0;d < lis.length;d++)
            {                                
                document.write('<span class="num_box"><a href="#" onclick="show('+d+')">'+d+'</a></span>');
            }
        }
        
        show_num();            
    </script>
</body>
</html>
posted on 2011-08-10 10:37 网宗阅读(275) 评论(0) 编辑收藏举报