使用scorllLeft实现轮播代码-前端--易笔记

直接上代码：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
            .fa{    
                width: 1200px;
                height:600px;
                margin: 0 auto;
                overflow: hidden;
            }
            .fa-one{
                width: 500%;
                height: 100%;
                position: relative;
            }
            .son-a{             
                width: 20%;
                height: 100%;
                text-align: center;
                line-height: 600px;
                font-size: 100px;
                float: left;
            }
            #aa{
                width: 100px;
                height: 60px;
                margin: 0 auto;
            }
 
        </style>
    </head>
    <body>
        <p class="fa">
            <p class="fa-one">
                <p class="son-a" style="background-color: red;">0</p>
                <p class="son-a" style="background-color: orange;">1</p>
                <p class="son-a" style="background-color: yellow;">2</p>
                <p class="son-a" style="background-color: green;">3</p>
                <p class="son-a" style="background-color: blue;">4</p>
            </p>
        </p>
    </body>
    <script src="jquery-1.8.3.min.js"></script>
    <script>
        (function(){                
            var i=1
            var fa=document.getElementsByClassName("fa")[0]
            var aa=document.getElementById("aa")
                     
            var a=setInterval(function(){
                if(i==6){
                    i=1
                }
                fa.scrollLeft=1200*i;
                i++
              
            },1000)
        })()
    </script>
</html>
时间：2017/2/18 14:27:40
