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

未知 02-07 5548

雷迪森安的乡亲们，欢迎来到老实人的前端课堂，今天我们来写个骚气磅礴的轮播图吧，内容太干，建议收藏起来慢慢看，最后我还会教大家如何免费部署上线哦~

正片

小轮播图滑动滚播，好不好看你说了算。

结构就两行 <div id="main"> <h1>something</h1> <div class="content"> <p>You can press <kbd>▲</kbd> <kbd>▼</kbd> on your keyboard or swipe up/down to navigate. Mouse wheel works too.</p> </div> <div class="buttons"> <button class="next" onclick="go(-1)"></button> <button class="prev" onclick="go(1)"></button> </div> </div> 样式

每张图片的位置样式此时已经预设好

html, body { padding: 0; margin: 0; overflow: hidden; font-family: "Sen"; } * { box-sizing: border-box; outline: none; -webkit-tap-highlight-color: transparent; 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://·/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+amount*end } const cursor = document.createElement('div'); cursor.className = 'cursor'; const cursorF = document.createElement('div'); cursorF.className = 'cursor-f'; let cursorX = 0; let cursorY = 0; let pageX = 0; let pageY = 0; let size = 8; let sizeF = 36; let followSpeed = .16; document.body.appendChild(cursor); document.body.appendChild(cursorF); if ('ontouchstart' in window) { cursor.style.display = 'none'; cursorF.style.display = 'none'; } cursor.style.setProperty('--size', size+'px'); cursorF.style.setProperty('--size', sizeF+'px'); window.addEventListener('mousemove', function(e) { pageX = e.clientX; pageY = e.clientY; cursor.style.left = e.clientX-size/2+'px'; cursor.style.top = e.clientY-size/2+'px'; }); function loop() { cursorX = lerp(cursorX, pageX, followSpeed); cursorY = lerp(cursorY, pageY, followSpeed); cursorF.style.top = cursorY - sizeF/2 + 'px'; cursorF.style.left = cursorX - sizeF/2 + 'px'; requestAnimationFrame(loop); } loop(); let startY; let endY; let clicked = false; function mousedown(e) { gsap.to(cursor, {scale: 4.5}); gsap.to(cursorF, {scale: .4}); clicked = true; startY = e.clientY || e.touches[0].clientY || e.targetTouches[0].clientY; } function mouseup(e) { gsap.to(cursor, {scale: 1}); gsap.to(cursorF, {scale: 1}); endY = e.clientY || endY; if (clicked && startY && Math.abs(startY - endY) >= 40) { go(!Math.min(0, startY - endY)?1:-1); clicked = false; startY = null; endY = null; } } window.addEventListener('mousedown', mousedown, false); window.addEventListener('touchstart', mousedown, false); window.addEventListener('touchmove', function(e) { if (clicked) { endY = e.touches[0].clientY || e.targetTouches[0].clientY; } }, false); window.addEventListener('touchend', mouseup, false); window.addEventListener('mouseup', mouseup, false); let scrollTimeout; function wheel(e) { clearTimeout(scrollTimeout); setTimeout(function() { if (e.deltaY < -40) { go(-1); } else if (e.deltaY >= 40) { go(1); } }) } window.addEventListener('mousewheel', wheel, false); window.addEventListener('wheel', wheel, false);

不学没思路，看完是不是感觉也不难啊？你做出来了吗？

更多实用炫酷表白代码可以在搜索公z号：前端老实人获取~

做好的网页效果,如何通过发链接给别人看?

1.1解决部署上线~> 部署上线工具(永久免费使用)

1.不需要买服务器就能部署线上,全世界都能访问你的连接啦, 这里给大家推荐一个程序员必备神器~ 简单易懂, 简直神器 ~ 需要源码或者部署神器可在公z号获取

2.就是把你的代码效果做好了以后, 部署到线上, 把链接发给别人, 就可以让对方通过你的连接点击进去, 就能看到你的网页效果啦, 电脑端和手机端都可以噢! (不然别人看你的网页都要发文件过去,体验感不太好~)

最后

博主为人老实，无偿解答问题，也会录制一些学习视频教同学们知识?

如果对您有帮助，希望能给个👍/评论/收藏

您的三连~是对我创作最大的动力支持

关注：前端老实人👇领取源码哦~