同时显示4张图片的轮播图源码
时间: 2024-03-02 18:48:42 浏览: 27
以下是同时显示4张图片的轮播图源码。
HTML代码:
```
<div class="carousel">
<div class="slides">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
<img src="image4.jpg">
</div>
</div>
```
CSS代码:
```
.carousel {
width: 100%;
overflow: hidden;
}
.slides {
display: flex;
flex-wrap: nowrap;
transition: transform 0.5s ease;
}
.slides img {
width: 25%;
margin-right: 1%;
}
.carousel:hover .slides {
transform: translateX(-26%);
}
.carousel:hover .slides img:last-child {
margin-right: 0;
}
```
该代码使用了flex布局,并且将图片的宽度设置为25%,同时设置右边距为1%,以便在容器中显示4张图片。通过CSS的:hover伪类,当鼠标悬停在容器上时,使用transform属性将图片向左移动26%,从而显示后面的图片。同时,还将最后一张图片的右边距设置为0,以防止出现间隙。
相关问题
同时显示4张图片的自动轮播源码
以下是同时显示4张图片的自动轮播源码。
HTML代码:
```
<div class="carousel">
<div class="slides">
<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">
<img src="image4.jpg">
</div>
</div>
```
CSS代码:
```
.carousel {
width: 100%;
overflow: hidden;
}
.slides {
display: flex;
flex-wrap: nowrap;
transition: transform 0.5s ease;
animation: slide 5s infinite;
}
.slides img {
width: 25%;
margin-right: 1%;
}
.carousel:hover .slides {
animation-play-state: paused;
}
.carousel:hover .slides img:last-child {
margin-right: 0;
}
@keyframes slide {
0% {
transform: translateX(0%);
}
20% {
transform: translateX(0%);
}
25% {
transform: translateX(-26%);
}
45% {
transform: translateX(-26%);
}
50% {
transform: translateX(-52%);
}
70% {
transform: translateX(-52%);
}
75% {
transform: translateX(-78%);
}
95% {
transform: translateX(-78%);
}
100% {
transform: translateX(-104%);
}
}
```
该代码基于前面的代码,使用了CSS的动画效果来实现自动轮播。通过@keyframes规则,定义了从0%到100%的动画过程,从而在5秒钟内完成轮播。当鼠标悬停在容器上时,使用animation-play-state属性暂停动画。
同时显示4张图片的自动轮播源码 的多种方法
以下是几种同时显示4张图片的自动轮播的源码实现方法:
方法一:使用Flexbox布局和JavaScript实现
HTML部分:
```
<div class="slider">
<div class="slider-container">
<img src="image-1.jpg">
<img src="image-2.jpg">
<img src="image-3.jpg">
<img src="image-4.jpg">
</div>
</div>
```
CSS部分:
```
.slider {
width: 100%;
overflow: hidden;
}
.slider-container {
display: flex;
width: 400%;
animation: slide 10s infinite linear;
}
.slider-container img {
width: 25%;
}
@keyframes slide {
0% {
transform: translateX(0);
}
25% {
transform: translateX(0);
}
30% {
transform: translateX(-25%);
}
55% {
transform: translateX(-25%);
}
60% {
transform: translateX(-50%);
}
85% {
transform: translateX(-50%);
}
90% {
transform: translateX(-75%);
}
100% {
transform: translateX(-75%);
}
}
```
JavaScript部分:
```
const slider = document.querySelector('.slider');
const container = document.querySelector('.slider-container');
const images = document.querySelectorAll('.slider-container img');
const imageWidth = images[0].clientWidth;
let counter = 1;
container.style.transform = `translateX(-${imageWidth * counter}px)`;
setInterval(() => {
container.style.transition = 'transform 0.5s ease-in-out';
counter++;
container.style.transform = `translateX(-${imageWidth * counter}px)`;
}, 5000);
container.addEventListener('transitionend', () => {
if (images[counter].id === 'last-clone') {
container.style.transition = 'none';
counter = images.length - 2;
container.style.transform = `translateX(-${imageWidth * counter}px)`;
}
if (images[counter].id === 'first-clone') {
container.style.transition = 'none';
counter = images.length - counter;
container.style.transform = `translateX(-${imageWidth * counter}px)`;
}
});
```
方法二:使用CSS Grid布局和JavaScript实现
HTML部分:
```
<div class="slider">
<div class="slider-container">
<img src="image-1.jpg">
<img src="image-2.jpg">
<img src="image-3.jpg">
<img src="image-4.jpg">
</div>
</div>
```
CSS部分:
```
.slider {
width: 100%;
overflow: hidden;
}
.slider-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
width: 400%;
animation: slide 10s infinite linear;
}
.slider-container img {
width: 100%;
height: auto;
}
@keyframes slide {
0% {
transform: translateX(0);
}
25% {
transform: translateX(0);
}
30% {
transform: translateX(-25%);
}
55% {
transform: translateX(-25%);
}
60% {
transform: translateX(-50%);
}
85% {
transform: translateX(-50%);
}
90% {
transform: translateX(-75%);
}
100% {
transform: translateX(-75%);
}
}
```
JavaScript部分同方法一。
方法三:使用jQuery实现
HTML部分:
```
<div class="slider">
<div class="slider-container">
<img src="image-1.jpg">
<img src="image-2.jpg">
<img src="image-3.jpg">
<img src="image-4.jpg">
</div>
</div>
```
CSS部分同方法一。
jQuery部分:
```
const container = $('.slider-container');
const images = $('.slider-container img');
const imageWidth = images.eq(0).width();
let counter = 1;
container.css('transform', `translateX(-${imageWidth * counter}px)`);
setInterval(() => {
container.css('transition', 'transform 0.5s ease-in-out');
counter++;
container.css('transform', `translateX(-${imageWidth * counter}px)`);
}, 5000);
container.on('transitionend', () => {
if (images.eq(counter).attr('id') === 'last-clone') {
container.css('transition', 'none');
counter = images.length - 2;
container.css('transform', `translateX(-${imageWidth * counter}px)`);
}
if (images.eq(counter).attr('id') === 'first-clone') {
container.css('transition', 'none');
counter = images.length - counter;
container.css('transform', `translateX(-${imageWidth * counter}px)`);
}
});
```