纯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-2020 CODEPRJ.COM