純CSS3代碼實現簡單的圖片輪播


以4張圖片為例:
1.基本布局:
將4張圖片左浮動橫向並排放入一個div容器內,圖片設置統一尺寸,div寬度設置4個圖片的總尺寸,然后放入相框容器div,
相框設置1個圖片的大小並設置溢出隱藏,以保證正確顯示一個照片。
2.設置動畫:
然后使用css3動畫,通過對photos進行位移,從而達到顯示不同的圖片,每次偏移一個圖片的寬度,即可顯示下一張圖片。
4張圖片,需要切換3次.
根據需要可以對各個圖片添加相應的序號和圖片簡介。

3.代碼如下:
 1 <style>
 2     #frame{position:absolute;width:300px;height:200px;overflow:hidden;border-radius:5px}
 3     #dis{position:absolute;left:-50px;top:-10px;opacity:.5}
 4     #dis li{display:inline-block;width:200px;height:20px;margin:0 50px;float:left;text-align:center;color:#fff;border-radius:10px;background:#000}
 5     #photos img{float:left;width:300px;height:200px}
 6     #photos {  position: absolute;z-index:9;  width: calc(300px * 4);/*---修改圖片數量的話需要修改下面的動畫參數*/  }
 7     .play{ animation: ma 20s ease-out infinite alternate;}
 8     @keyframes ma {
 9         0%,25% {        margin-left: 0px;       }
10         30%,50% {       margin-left: -300px;    }
11         55%,75% {       margin-left: -600px;    }
12         80%,100% {       margin-left: -900px;    }
13 
14     }
15 </style>
<div id="frame" >
    <div id="photos" class="play">
        <img src="images/1.jpg" >
        <img src="images/3.jpg" >
        <img src="images/4.jpg" >
        <img src="images/5.jpg" >
        <ul id="dis">
            <li>111111111111111</li>
            <li>22222222222222</li>
            <li>33333333333333</li>
            <li>44444444444444</li>
        </ul>
    </div>
</div>
 
         
         
       


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM