js实现简单的轮播图

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
    <html>
        <head>

            </head>
    <body>
        <script>
//    var timer=null;
//    var iNow=0;
//    timer=setInterval(
//        function(){
//            iNow++;
//            //buttons.eq(iNow).trigger("click");
//        }
//    );        
// 
// 
    //window.onload 界面加载完毕后才开始加载元素 真正获取了id元素        
    window.onload = function() {
          //  var container=document.getElementById('container');
            var list = document.getElementById('list');
            var prev = document.getElementById('prev');
            var next = document.getElementById('next');
           var buttons=document.getElementById('buttons').getElementsByTagName('span');
            //定义一个函数  待会就可以直接调用
             var index=1;
             var timer;
              function showButton(){
                for(var i=0;i<buttons.length;i++){
                    if(buttons[i].className=='on')
                    {
                        buttons[i].className='';
                        break;
                    }
                }
                buttons[index-1].className='on';//将按钮的样式改为
            }
            
            function animate(offset) {
                //获取的是style.left，是相对左边获取距离，所以第一张图后style.left都为负值，
                //且style.left获取的是字符串，需要用parseInt()取整转化为数字。
                var newLeft = parseInt(list.style.left) + offset;
                list.style.left = newLeft + 'px';
                
                if(newLeft>-600){
                 list.style.left = -3000 + 'px';
               }
               
                 if(newLeft<-3000){
                 list.style.left = -600 + 'px';
               }
               
            }
            
            function play(){
                //setinterval 不停的执行
                timer=setInterval(function(){
                    next.onclick();
                },3600);
            }
            
            function stop(){
                clearInterval(timer);
            }
            next.onclick=function(){
                //list.style.left=parseInt(list.style.left)-600+'px';
                if(index==5){
                    index=1;
                }
                else{
                    index=index+1;
                    
                }
                showButton();
                animate(-600);
            }
            prev.onclick=function(){
                //list.style.left=parseInt(list.style.left)+600+'px';
                if(index==1){
                    index=5;
                    
                }
                else{
                    index=index-1;
                }
                showButton();
                animate(600);
            }
//          container.onmouseover=stop();
//          container.onmouseout=play();
            play();

//          prev.onclick = function() {     
//              index-=1;
//              showButton();
//              animate(600);
//              
//          }
//          //绑定一个事件到onclick上
//          next.onclick = function() {  
//              index+=1;
//              showButton();
//              animate(-600);
//              
//          }
        }
        </script>
<div id="container">
        <div id="list" style="left: -600px;">
            <img src="/yejiamin/images/4.jpg" alt="1" />
            <img src="/yejiamin/images/1.jpg" alt="2" />
            <img src="/yejiamin/images/2.jpg" alt="3" />
            <img src="/yejiamin/images/3.jpg" alt="4" />
            <img src="/yejiamin/images/4.jpg" alt="5" />
             <img src="/yejiamin/images/5.jpg" alt="6" />
            <img src="/yejiamin/images/4.jpg" alt="7" />
            
        </div>
        <div id="buttons">
            <span index="1" class='on'></span>
            <span index="2"></span>
            <span index="3"></span>
            <span index="4"></span>
            <span index="5"></span>
            
        </div>
        <a href="javascript:;" id="prev" class="arrow">&lt;</a>
        <a href="javascript:;" id="next" class="arrow">&gt;</a>
    </div>
   </body>
<style>

* {
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        
        body {
            padding: 20px;
        }
        
        #container {
            position: relative;
            width: 600px;
            height: 400px;
            border: 3px solid #333;
            overflow: hidden;
        }
        
        #list {
            position: absolute;
            z-index: 1;
            width: 4200px;
            height: 400px;
        }
        
        #list img {
            float: left;
            width: 600px;
            height: 400px;
        }
        
        #buttons {
            position: absolute;
            left: 250px;
            bottom: 20px;
            z-index: 2;
            height: 10px;
            width: 100px;
        }
        
        #buttons span {
            float: left;
            margin-right: 5px;
            width: 10px;
            height: 10px;
            border: 1px solid #fff;
            border-radius: 50%;
            background: #333;
            cursor: pointer;
        }
        
        #buttons .on {
            background: orangered;
        }
        #buttons.off{
            background:#333;
        }
        
        .arrow {
            position: absolute;
            top: 180px;
            z-index: 2;
            display: none;
            width: 40px;
            height: 40px;
            font-size: 36px;
            font-weight: bold;
            line-height: 39px;
            text-align: center;
            color: #fff;
            background-color: RGBA(0, 0, 0, .3);
            cursor: pointer;
        }
        
        .arrow:hover {
            background-color: RGBA(0, 0, 0, .7);
        }
        
        #container:hover .arrow {
            display: block;
        }
        
        #prev {
            left: 20px;
        }
        
        #next {
            right: 20px;
        }
<style>
    
        </html>
暂时简单放置一下代码全部放在php内后期再修改