如此优秀的JS轮播图，写完老师都沉默了

cursor: none;

user-select: none;

-webkit-user-drag: none;

}

#main {

display: flex;

}

#main .part {

flex: 1;

}

#main .part .section {

width: 100%;

height: 100vh;

position: relative;

overflow: hidden;

}

#main .part .section img {

width: 100vw;

height: 100vh;

object-fit: cover;

position: absolute;

left: var(–x);

pointer-events: none;

}

.cursor {

width: var(–size);

height: var(–size);

border-radius: 50%;

background: white;

position: absolute;

z-index: 999;

pointer-events: none;

mix-blend-mode: difference;

}

.cursor-f {

width: var(–size);

height: var(–size);

position: absolute;

top: 0;

left: 0;

background-image: url(“data:image/svg+xml,%3Csvg width=‘47’ height=‘47’ viewBox=‘0 0 47 47’ fill=‘none’ xmlns=‘http://www.w3.org/2000/svg’%3E%3Cpath d=‘M42.4202 42.4202C38.8403 46 33.3594 46 23.5 46C13.6406 46 8.15966 46 4.57983 42.4202C1 38.8403 1 33.3594 1 23.5C1 13.6406 1 8.15966 4.57983 4.57983C8.15966 1 13.6406 1 23.5 1C33.3594 1 38.8403 1 42.4202 4.57983C46 8.15966 46 13.6406 46 23.5C46 33.3594 46 38.8403 42.4202 42.4202Z’ stroke=‘white’/%3E%3C/svg%3E%0A”);

background-size: cover;

mix-blend-mode: difference;

pointer-events: none;

opacity: 0.5;

}

.buttons {

position: absolute;

right: 25px;

top: 50%;

transform: translateY(-50%);

z-index: 99;

}

.buttons button {

border: none;

background-size: contain;

background: url(“data:image/svg+xml, 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 %3Csvg width=‘10’ height=‘29’ viewBox=‘0 0 10 29’ fill=‘none’ xmlns=‘http://www.w3.org/2000/svg’%3E%3Cpath d=‘M9 0V27L1 17.4857’ stroke=‘white’ stroke-width=‘2’ /%3E%3C/svg%3E%0A”) no-repeat;

background-position: center;

width: 10px;

height: 30px;

display: block;

margin: 20px 0;

padding: 0 15px;

transition-duration: 0.6s;

}

.buttons button.next {

transform: scaleY(-1);

}

.buttons button.prev:active {

transform: translateY(8px);

}

.buttons button.next:active {

transform: scaleY(-1) translateY(8px);

}

h1 {

position: absolute;

top: 50%;

transform: translateY(-50%);

left: 0;

right: 0;

margin: auto;

z-index: 99;

color: white;

text-align: center;

font-size: 2.6em;

mix-blend-mode: overlay;

pointer-events: none;

}

.content {

width: 90%;

position: absolute;

bottom: 20px;

text-align: center;

left: 0;

right: 0;

margin: auto;

color: white;

z-index: 99;

font-size: 0.8em;

}

.content p {

margin: 0.5em auto;

}

.content kbd {

width: 15px;

height: 15px;

border: 1px solid white;

display: inline-block;

border-radius: 3px;

font-size: 0.9em;

vertical-align: text-top;

}

.content a {

color: rgba(227, 227, 227, 0.78);

text-decoration: none;

border-bottom: 1px solid currentColor;

}

.content a:hover {

padding-bottom: 1px;

}

[](()表现

---

关键代码，总共没几行，让它动起来，你们直接复制拿去用就行，不懂的话再私下问我吧。

const cols = 3;

const main = document.getElementById(‘main’);

let parts = [];

let images = [

“https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80”,

“https://images.unsplash.com/photo-1544198365-f5d60b6d8190?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80”,

“https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2700&q=80”

];

let current = 0;

let playing = false;

for (let i in images) {

new Image().src = images[i];

}

for (let col = 0; col < cols; col++) {

let part = document.createElement(‘div’);

part.className = ‘part’;

let el = document.createElement(‘div’);

el.className = “section”;

let img = document.createElement(‘img’);

img.src = images[current];

el.appendChild(img);

part.style.setProperty(‘–x’, -100/cols*col+‘vw’);

part.appendChild(el);

main.appendChild(part);

parts.push(part);

}

let animOptions = {

duration: 2.3,

ease: Power4.easeInOut

};

function go(dir) {

if (!playing) {

playing = true;

if (current + dir < 0) current = images.length - 1;

else if (current + dir >= images.length) current = 0;

else current += dir;

function up(part, next) {

part.appendChild(next);

gsap.to(part, {…animOptions, y: -window.innerHeight}).then(function () {

part.children[0].remove();

gsap.to(part, {duration: 0, y: 0});

})

}

function down(part, next) {

part.prepend(next);

gsap.to(part, {duration: 0, y: -window.innerHeight});

gsap.to(part, {…animOptions, y: 0}).then(function () {

part.children[1].remove();

playing = false;

})

}

for (let p in parts) {

let part = parts[p];

let next = document.createElement(‘div’);

next.className = ‘section’;

let img = document.createElement(‘img’);

img.src = images[current];

next.appendChild(img);

if ((p - Math.max(0, dir)) % 2) {

down(part, next);

} else {

up(part, next);

}

}

}

}

window.addEventListener(‘keydown’, function(e) {

if ([‘ArrowDown’, ‘ArrowRight’].includes(e.key)) {

go(1);

}

else if ([‘ArrowUp’, ‘ArrowLeft’].includes(e.key)) {

go(-1);

}

});

function lerp(start, end, amount) {

return (1-amount)start+amountend

}

const cursor = document.createElement(‘div’);

cursor.className = ‘cursor’;

const cursorF = document.createElement(‘div’);

cursorF.className = ‘cursor-f’;