css3几个图片轮播

CSS3提供了许多实现图片轮播的方法，以下介绍几种常见的。

/* 1. 使用CSS3动画 */.carousel {
    position: relative;
    width: 800px;
    height: 400px;
    overflow: hidden;
}
.carousel img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s;
}
.carousel img:first-child {
    opacity: 1;
}
@keyframes carousel {
0% {
    opacity: 1;
}
100% {
    opacity: 0;
}
}
.carousel img:last-child {
    animation: carousel 5s infinite;
}

以上代码使用CSS3动画轮播图片，通过设置第一张图片的opacity为1，设置最后一张图片的animation为轮播动画，达到轮播图片的效果。

/* 2. 使用CSS3过渡 */.carousel {
    position: relative;
    width: 800px;
    height: 400px;
    overflow: hidden;
}
.carousel img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s;
}
.carousel img:first-child {
    opacity: 1;
}
.carousel img:target {
    opacity: 1;
}
.carousel a {
    	dispaly: none;
}
.carousel a:nth-child(2):target ~ img:first-child {
    	opacity: 0;
}
.carousel a:nth-child(3):target ~ img:first-child {
    	opacity: 0;
}
.carousel a:nth-child(4):target ~ img:first-child {
    	opacity: 0;
}
.carousel a:nth-child(5):target ~ img:first-child {
    	opacity: 0;
}

以上代码使用CSS3过渡轮播图片，通过设置第一张图片的opacity为1，设置每张图片的target为当前图片，达到轮播图片的效果。

/* 3. 使用jQuery插件slick.js */.carousel {
    width: 800px;
    height: 400px;
}
.carousel img {
    width: 800px;
    height: 400px;
}
    

以上代码使用jQuery插件slick.js实现图片轮播，只需将需要轮播的图片包裹在.carousel标签内，然后在页面引入slick.js即可。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！