国产麻豆一区二区精彩视频-国产麻豆一区精品视频-国产麻豆一区在线-国产毛a片久久久久无码-国产毛片av一区二区三区网站-国产毛片精品av一区二区

用css3動畫實現圖片切換效果，原理還是改變left值。只有最簡單的自動播放功能，切換后短時間靜止，通過最后的位置克隆第一張圖片，實現無縫切換。

html結構

<div id="container"> 
        <ul class="pic"> 
            <li><a href="javascript:;"><img src="images/DSC01627.jpg" alt="pic1"></a></li> 
            <li><a href="javascript:;"><img src="images/DSC01628.jpg" alt="pic2"></a></li> 
            <li><a href="javascript:;"><img src="images/DSC02637.jpg" alt="pic3"></a></li> 
            <li><a href="javascript:;"><img src="images/DSC01627.jpg" alt="pic1"></a></li> 
<!-- 克隆第一張 --> 
        </ul> 
         
    </div>

css樣式

　　　　　*{  
             margin: 0; 
             padding: 0;  
             text-decoration: none; 
         } 
        ul{ 
            list-style: none; 
        } 
         
        #container{ 
            position: relative; 
            width: 400px; 
            height: 200px; 
            overflow: hidden;/*隱藏溢出的圖片*/ 
        } 
        .pic{ 
            width:1600px;/*4張圖的寬度*/ 
            position: absolute;/*基于父容器進行定位*/ 
            left:0; 
            animation-name: focusmap; 
            animation-duration: 12s; 
            animation-iteration-count: infinite;//動畫調用可以簡寫 

        } 
         @keyframes focusmap { 
            0%,30%{ 
                left: 0; 
            } 
            35%,65%{ 
                left: -400px; 
            } 
            70%,99%{ 
                left: -800px; 
            } 
            100%{ 
                left: -1200px; 
            } 
            
        } 
        .pic li{ 
            float: left; 
            background: #5dd94e; 
        } 

        .pic li img { 
            width: 400px; 
            height: 200px; 
        }