Look at the effect first:
There are many ways to rotate pictures, and there are many effects. The following is a simple carousel effect with blurred pictures on both sides and enlarged picture in the middle. After clicking the left or right pictures with the mouse , they will move to the middle and become larger, and other pictures will move to the sides and blur.
Click on the far right picture:
Click on the far left picture:
This effect is to rotate only after the mouse is clicked. As for the effect of automatic rotation without the mouse click, there will be time to publish another article in the future.
achieve:
1. Define the label, .kuang is the bottom box, .item is the box for pictures, you can write any picture box, I wrote 8 pictures, no more than 3 pictures, they all have the same class name. item. Give them a class name for the last 3 pictures. .left represents the left one of our renderings, .middle is the middle one of the above renderings, and .right is the right one of our renderings:
<div class="kuang">
<div class="kuang">
<div class="item "><img src="4.jpg"></div>
<div class="item "><img src="5.jpg"></div>
<div class="item "><img src="6.jpg"></div>
<div class="item "><img src="7.jpg"></div>
<div class="item "><img src="8.jpg"></div>
<div class="item left"><img src="1.jpg"></div>
<div class="item middle"><img src="2.jpg"></div>
<div class="item right"><img src="3.jpg"></div>
</div>
2. The basic style of the bottom box and the picture. First, let all picture boxes be absolutely positioned at the same position, so that the pictures all overlap:
.kuang{
position: relative;
width: 400px;
height: 250px;
cursor: pointer;
}
.item{
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 250px;
transition: all 1.5s;
}
.item img{
width: 100%;
height: 100%;
}
transition: all 1.5s; transition effect
3. Write the three pictures of the above effect that our eyes see and then superimpose a class style for them. The image on the left moves half of itself to the left and blurs, the image on the right moves half to the right and blurs, and the middle one is in the middle and zooms in 1.3 times. :
.kuang .left{
left: -200px;
filter: blur(6px);
z-index: 3;
}
.kuang .middle{
left: 0px;
transform: scale(1.3);
z-index: 4;
}
.kuang .right{
left: 200px;
filter: blur(6px);
z-index: 3;
}
The middle image is displayed on the top layer, so the z-index is the largest. To cover the left and right.
filter: blur(6px); The picture is blurred.
transform: scale(1.3); The picture is enlarged.
4. Give a style to other pictures that are not the 3 renderings that our eyes see,
.xiaoshi{
left: 0px;
z-index: 1;
}
They all overlap and go back to the middle, and their z-index is the smallest, which is smaller than the left, center, and right 3 eyes, so no one can see them.
The 5.js implementation is roughly assigning class names to the corresponding elements:
(1) First, all the pictures are placed in the items array, and then the for loop binds a click event to each picture.
(2) Then in the click event, there is another for loop to clear all three effect classes in all the pictures, and then add xiaoshi classes to them all. In this way, the pictures all return to the middle position. If there are only three pictures in total, this cycle can be deleted.
(3) Then add the class .middle to the picture that gets the click event, then it will move to the middle and zoom in.
this.previousElementSibling means to get the previous element of its sibling, which means it gives him the last picture. The left class makes it to the left. ? ? It means that the front is really selected, otherwise the back is selected. The following is items[items.length-1], which means that if there is no picture before it, select the last picture.
nextElementSibling means to get the next element of its sibling, which means it gives him the next picture. The right class makes it to the right. ? ? It means that the front is really selected, otherwise the back is selected. The following is items[0], which means that if there is no picture behind it, select the first picture.
var items = document.querySelectorAll('.item');
for(var i=0;i<items.length;i++)
{
items[i].addEventListener('click',function(){
for(let j=0;j<items.length;j++)
{
items[j].classList.remove('left','right','middle');
items[j].classList.add('xiaoshi');
}
this.classList.remove('left','middle','right');
this.classList.add('middle');
let left = this.previousElementSibling ?? items[items.length-1];
left.classList.add('left');
let right = this.nextElementSibling ?? items[0];
right.classList.add('right');
})
}
Complete code:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>北极光之夜。</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-image: radial-gradient(white,black) ;
}
.kuang{
position: relative;
width: 400px;
height: 250px;
cursor: pointer;
}
.item{
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 250px;
transition: all 1.5s;
}
.item img{
width: 100%;
height: 100%;
}
.kuang .left{
left: -200px;
filter: blur(6px);
z-index: 3;
}
.kuang .middle{
left: 0px;
transform: scale(1.3);
z-index: 4;
}
.kuang .right{
left: 200px;
filter: blur(6px);
z-index: 3;
}
.xiaoshi{
left: 0px;
z-index: 1;
}
</style>
</head>
<body>
<div class="kuang">
<div class="kuang">
<div class="item "><img src="4.jpg"></div>
<div class="item "><img src="5.jpg"></div>
<div class="item "><img src="6.jpg"></div>
<div class="item "><img src="7.jpg"></div>
<div class="item "><img src="8.jpg"></div>
<div class="item left"><img src="1.jpg"></div>
<div class="item middle"><img src="2.jpg"></div>
<div class="item right"><img src="3.jpg"></div>
</div>
</div>
<script>
var items = document.querySelectorAll('.item');
for(var i=0;i<items.length;i++)
{
items[i].addEventListener('click',function(){
for(let j=0;j<items.length;j++)
{
items[j].classList.remove('left','right','middle');
items[j].classList.add('xiaoshi');
}
this.classList.remove('left','middle','right');
this.classList.add('middle');
let left = this.previousElementSibling ?? items[items.length-1];
left.classList.add('left');
let right = this.nextElementSibling ?? items[0];
right.classList.add('right');
})
}
</script>
</body>
</html>
Summary (lyric):
Other articles:
responsive card hovering effect html+css
water wave loading animation html+css
navigation bar scrolling gradient effect html+css+js
, etc...
I often listen to this song recently: I have never been to New York-Chopstick Brothers.
If i leave now
Should i leave
Never come back
…
When i stand by the street
I have brought everything
Passport credit card and money
Maybe catch the plane tonight
Taxi parked under the street light
Not bad by bus or subway
The feeling of heartbeat comes at this moment
I am full of dreams again
Indulge yourself and get rid of the restraints
I really want to leave
Want to leave
I like a sentence:
Let's just graduate today~