Use React to create an infinite slide effect.
1. CSS part: the outer div is set beyond hidden, and the inner ul is set wide enough. If you put 6 pictures, 700% width is enough, because you need to put one more picture at the end, so that when you slide to the 7th picture, that is the first picture displayed, and then close the animation to seamlessly cut to the first one. Inner layer LI is 100% wide, set float.
2. Add classes such as animate and Transition: 0.5s
3. Set an array of multicast objects, such as PICS, in component state
4.render(
<ul className={['lunbo'.this.state.animate ? 'animate' : ' '].join(' ')} style={{ marginLeft: this.state.marginLeft }}>
{pics.map((it, i) = > <li key={i}><img src={it.img} /></li>)}
</ul>
Copy the code
MarginLeft controls transitions, and you can also use translateX.
animater() {
let ml = this.state.marginLeft
let len = this.state.pics.length
if (ml <= -(len - 1) * 600) { // This image area is 600px wide
ml = 0
this.setState({
animate: false.// Close the animation
marginLeft: ml
})
}
ot = setTimeout(() = > {
let ml = this.state.marginLeft - 600
this.setState({
marginLeft: ml,
animate: true})},1000)}Copy the code
Call it:
setInter() {
clearInterval(tt);
tt = setInterval(() = > { this.animater() }, 2000);
}
Copy the code
We then use vue to achieve a zoom in and out rotation effect:
Effect: the next image zoomed in and the last image zoomed out. Here we set the switching time to 4 seconds and the animation time to 2 seconds. It looks smooth. Consider the following:
1. Prepare the two IMG placeholders that are stacked up and down
2. IsChange controls one image to be “change” and one not to fade in and out simultaneously
3. The timing for the two layers to enter the next one is different. The opacity of the upper layer is 0 at the beginning of the animation, and it fades in 2 seconds after switching to the next one while the lower layer fades out
4. At this point, turn off the animation, switch the lower layer to the upper layer, remove the change style, and apply the Change style to the upper layer
5. Then start animation 2 seconds later, loops 3 and 4
The code:
<template>
<div class="aimg">
<img
:src="imgs[lastIndex].src"
:class="[!isChange ? '' : 'change', isAnimate ? 'animate' : '']"
/>
<img
:src="imgs[index].src"
:class="[isChange ? '' : 'change', isAnimate ? 'animate' : '']"
/>
</div>
</template>
<script>
var timer;
export default {
data() {
return {
imgs: [{src: require("@/assets/img/1.jpg")}, {src: require("@/assets/img/2.jpg")}, {src: require("@/assets/img/3.jpg")}, {src: require("@/assets/img/4.jpg")}, {src: require("@/assets/img/5.jpg")},].index: 0.lastIndex: 0.isChange: false.isAnimate: false}; },mounted() {
this.imgAnimate();
},
methods: {
imgAnimate() {
clearInterval(timer);
timer = setInterval(() = > {
this.isAnimate = true; // Open the animation
this.index++; // Switch to the next layer
if (this.index == this.imgs.length) {
this.index = 0;
}
this.isChange = !this.isChange; // The upper layer fades in and the lower layer fades out
setTimeout(() = > {
this.isAnimate = false; // Close the animation
this.lastIndex = this.index; // Cut the next layer to the next one
this.isChange = !this.isChange; // Switch layers up and down
}, 2000);
}, 4000);
},
changeAnimate(){},}};</script>
<style lang="scss" scoped>
.aimg {
margin: auto;
width: 600px;
position: relative;
height: 337.5 px.;
border: 10px solid #ccc;
overflow: hidden;
img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.animate {
transition: 2s;
}
.change {
transform: scale(1.1);
opacity: 0; }}</style>
Copy the code