实现思路
1、通过animation达到动起来的效果，具体变化似乎有两种可行方式：
2、在动画中，通过CSS-transform不断平移轮播图元素位置。
3、在动画中，设置不同的left值。
实现效果与代码
其中值得注意的点在于需要手动在轮播图头部添加最后一张图的复制，否则会有明显的闪动效果。
实例
<!DOCTYPEhtml>
<body>
<divstyle="flex:1;height:300px;z-index:10;box-shadow:inset00300pxrgba(0,0,0,0.99);">
left
</div>
<divclass="showboxborderbox-shadow">
<divclass="leftborder">
左
</div>
<divclass="rightborder">
右
</div>
<divid="imgbox"class="centerimgbox">
<imgsrc="http://uusucn.zbbe.cn/wp-content/uploads/2024/01/the-sun-3057622__340.jpg"/>
<imgsrc="http://uusucn.zbbe.cn/wp-content/uploads/2024/01/mountains-6508015_960_720.jpg"/>
<imgsrc="http://uusucn.zbbe.cn/wp-content/uploads/2024/01/cereals-6508088__340.jpg"/>
<imgsrc="http://uusucn.zbbe.cn/wp-content/uploads/2024/01/the-sun-3057622__340.jpg"/>
</div>
</div>
<divstyle="flex:1;height:300px;z-index:10;box-shadow:inset00300pxrgba(0,0,0,0.99);">
right
</div>
</body>
<!--<script>
leta=0
letmax=300*3;
window.onload=function(){
refresh();
}
functionrefresh(){
document.getElementById("imgbox").style.left=a+"px";
}
functionleft(){
a=(a-300)%max;
refresh();
}
functionright(){
a=(a+300)%max;
refresh();
}
</script>-->
<style>
body{
width:100%;
height:100%;
z-index:0;
/*background-color:rgba(0,0,0,0.5);*/
box-shadow:inset00300pxrgba(0,0,0,0.1);
}
.center{
display:flex;
flex-direction:row;
align-items:center;
justify-content:center;
}
.showbox{
width:300px;
height:300px;
/*background:chocolate;*/
position:relative;
overflow:visible;
display:flex;
flex-direction:row;
align-items:center;
justify-content:center;
/*z-index:-1;*/
opacity:1;
}
.left{
position:absolute;
left:0;
top:50%;
cursor:pointer;
background:blue;
z-index:100;
}
.right{
position:absolute;
right:0;
top:50%;
cursor:pointer;
background:blue;
z-index:100;
}
.border{
border:1pxsolidblack;
}
.centerimg{
width:100%;
height:100%;
}
.myimg{
width:300px;
height:300px;
z-index:-1;
opacity:1;
/*filter:alpha(opacity=60);*/
}
.imgbox{
position:absolute;
left:-600px;
top:0;
z-index:-1;
animation:slideshow10sbothinfinite;
}
@keyframesslideshow{
0%{
left:-900px;
}
33%{
left:-600px;
}
66%{
left:-300px;
}
100%{
left:0;
}
}
</style>
</html>
以上就是CSS实现轮播图的方法，希望对大家有所帮助。更多css学习指路：css教程
原文来自：https://www.py.cn© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
暂无评论内容