javascriptは輪播図を実現します.

//html

    

        ![](images/05.png)
        ![](images/01.png)
        ![](images/02.png)
        ![](images/03.png)
        ![](images/04.png)
        ![](images/05.png)
        ![](images/01.png)
    
    

        
        
        
        
        
    
    
    


    var lists = document.getElementById("lists");
    var btns = document.getElementById("btns").getElementsByTagName("span");
    var prev = document.getElementById("prev");
    var next = document.getElementById("next");
    var index = 0;
    function animate(offset){
        var newLeft=parseInt(lists.style.left)+offset;
        /*       -600px*/
        lists.style.left=newLeft+"px";
        if(newLeft<-3000){
            lists.style.left=-600+"px"
        }
        if(newLeft>-600){
            lists.style.left=-3000+"px"
        }
    }
    /*    */
    function showBtn(){
        for(var i =0;i<btns.length;i++){
            btns[i].className="";
        }
        btns[index].className="current"
    }
    /*   */
    next.onclick = function(){
        animate(-600);
        if(index==4){
            index=0
        }else{
            index++;
        }
        showBtn();
    };
    /*   */
    prev.onclick = function(){
        animate(600);
        if(index==0){
            index = 4
        }else{
            index--;
        }
        showBtn();
    }

//css