頁面結(jié)構(gòu)

原理（通過圖片位置的變換來實現(xiàn)輪播辞槐，container位置有限，一次只能顯示一張梨树，container的寬度長度就是我們能看到的輪播圖的長度寬度销斟，如果哪站圖片移動到那里的時候，就顯示那一張）

  <div id = "container">
    <div id="list"  style="left:-650px"> //主體
        <img class="img" src="./images/4.jpg" alt=""/>
        <img class="img" src="./images/1.jpg" alt=""/>
        <img class="img" src="./images/2.jpg" alt=""/>
        <img class="img" src="./images/3.jpg" alt=""/>
        <img class="img" src="./images/4.jpg" alt=""/>
        <img class="img" src="./images/1.jpg" alt=""/>
    </div>
    <div id="buttons">
        <span index="1" class="on"></span>
        <span index="2"></span>
        <span index="3"></span>
        <span index="4"></span>
    </div>
    <a href="#" class="arrow"id="prev">&lt</a>
    <a href="#" class="arrow"id="next">&gt</a>
</div>

        <style>
    html *{
        padding:0;
        margin:0;
    }
    #container{
        width:600px;
        height:350px;
        overflow:hidden;
        position:relative;
        z-index:1;
    }
    #list{
        width:4000px;
        height:350px;
        position:absolute;
        z-index:1;
    }
    .img{
        float:left;
    }
    .arrow{
        width:30px;
        height:50px;
        font-size:40px;
        position:absolute;
        z-index:2;
        text-decoration:none;
        color:#fff;
    }
    .arrow:hover{
        background-color:grey;
        opacity:0.5;
        z-index:2;
    }
    #prev{
        position:absolute;
        top:150px;
        right:550px;
    }
    #next{
        position:absolute;
        top:150px;
        right:20px;     
    }
    
    #buttons{
        z-index:3;
        position:absolute;  
        bottom:20px;    
        left:200px; 
    }
    span{
        height:10px;
        width:10px;
        border-radius:50%;
        background-color:#fff;
        float:left;
        margin-right:20px;
        
    }
    .on{
        background-color:orange;
    }
     </style>

問題一：
為什么要前面后面各多加一張照片

image.png

箭頭切換

定義click事件测暗，定義animation(offest)

無限滾動

next點擊時央串，若當(dāng)前圖片索引值為4(一共有4張要顯示的圖片）,則令index = 1；重新定位碗啄。prev點擊時质和，若當(dāng)前圖片索引值為1,則令index = 4;

按鈕切換

定位當(dāng)前按鈕索引值（getAttribute)，兩個索引之差再進(jìn)行計算稚字。

定時播放

定時器饲宿。
container.onmouseover=stop;
container.onmouseout=play;

        <style>
    html *{
        padding:0;
        margin:0;
    }
    #container{
        width:600px;
        height:350px;
        overflow:hidden;
        position:relative;
        z-index:1;
    }
    #list{
        width:4000px;
        height:350px;
        position:absolute;
        z-index:1;
    }
    .img{
        float:left;
    }
    .arrow{
        width:30px;
        height:50px;
        font-size:40px;
        position:absolute;
        z-index:2;
        text-decoration:none;
        color:#fff;
    }
    .arrow:hover{
        background-color:grey;
        opacity:0.5;
        z-index:2;
    }
    #prev{
        position:absolute;
        top:150px;
        right:550px;
    }
    #next{
        position:absolute;
        top:150px;
        right:20px;     
    }
    
    #buttons{
        z-index:3;
        position:absolute;  
        bottom:20px;    
        left:200px; 
    }
    span{
        height:10px;
        width:10px;
        border-radius:50%;
        background-color:#fff;
        float:left;
        margin-right:20px;
        
    }
    .on{
        background-color:orange;
    }