当前位置：九州下载 > 建站问答 >

CSS实现轮播图的方法

时间：2023-02-25 13:27编辑：九州下载来源：www.wzjsgs.com

实现思路

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="https://cdn.pixabay.com/photo/2018/01/03/05/33/the-sun-3057622__340.jpg"/>
<imgsrc="https://cdn.pixabay.com/photo/2021/07/29/20/23/mountains-6508015_960_720.jpg"/>
<imgsrc="https://cdn.pixabay.com/photo/2021/07/29/21/03/cereals-6508088__340.jpg"/>
<imgsrc="https://cdn.pixabay.com/photo/2018/01/03/05/33/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中outline方法的使用