CSS实现轮播图的方法

hzh932

9个月前发布

02212

实现思路

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