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

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

正片

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

结构就两行

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

最后

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

如果对您有帮助，希望能给个

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

JS轮播图（网易云轮播图）
JS 轮播图写在前面最聪明的人是最不愿浪费时间的人.--但丁实现功能图片自动切换鼠标移入停止自动播放,显示按钮点击按钮,实现前后翻鼠标移入小圆圈,可以跳转到对应图片点击左右两侧图片部分 ...
JS轮播图（点击切换、自动播放、悬停控制）
JS轮播图轮播图可以说是网页上十分常见的效果,很多朋友在学习JavaScript后都迫不及待的想写一些好看对的效果出来,那么轮播图就是一个很不错的练手实例.下面就是通过JS写的轮播图效果: 功能介绍 ...
关于js轮播图最后一张图片显示不出来的问题
今天跟着视频学敲js轮播图,轮播图底部的小圆点是随着图片数量生成的,当时为了测试小圆点生成的数量是否和图片一致,在原来8张图片的基础上多加了一张图片为9张写完点击底部小圆点使轮播图切换,进行测试.发 ...
原生JS轮播图的知识点梳理
JS轮播图的梳理拿Dom元素中的oLis和oImg和父元素oNav,可以用documemt.querySelectorAll 用for循环可以拿出oLis的index值, 写一个显示函数 activ ...
JavaScript的案例（数据校验，js轮播图，页面定时弹窗）
1.数据校验步骤 1.确定事件(onsubmit)并绑定一个函数 2.书写这个函数,获取数据,并绑定id ...
php 走马灯轮播,Vue.js轮播图走马灯代码实例（全）
这个是html, 数据中我用了一个数组来放图片的目录, data() { return { superurl: [ { url: '', img: '../../../../static/image/ ...
JS 轮播图图片切换（定时器）
标题JS 轮播图图片切换(定时器) 这次的轮播图与上次的图片切换相比,仅仅是加上了定时器,使其可以自动切换. 上次的图片切换的链接:https://blog.csdn.net/qq_38318589 ...
html5移动端轮播图特效,支持移动端的纯js轮播图插件awesome-slider
awesome-slider是一款支持移动端的纯js轮播图插件.该轮播图插件支持任何HTML标签,可以自定义分页标签和Loading效果,支持在前端框架如react中使用. 使用方法安装: /* y ...
html轮播图循环效果,TremulaJS-跨设备多功能的无限循环js轮播图插件
TremulaJS是一款非常酷的跨设备多功能的无限循环js轮播图插件.TremulaJS是一个客户端javascript UI组件,它基于贝兹曲线和物理动量效应制作各种效果,可以制作无限循环的图片流, ...
html 图片轮播渐变,js轮播图自动切换和css做页面自动渐变
js轮播图自动切换和css页面自动渐变效果如下: 可以去jq官网学习:http://www.jq22.com/ 部分代码如下: *{margin: 0; padding: 0;} p{text-al ...

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

正片

结构就两行

样式

表现

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

最后

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

最新文章

热门文章