网站开发需求确认书,vis设计,自助建站平台网站,seo网站推广软件 快排#x1f345; 作者主页#xff1a;Java李杨勇 #x1f345; 简介#xff1a;Java领域优质创作者#x1f3c6;、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我#xff0c;都给你】 #x1f345; 欢迎点赞 #x1f44d; 收藏 ⭐留言 … 作者主页Java李杨勇 简介Java领域优质创作者、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我都给你】 欢迎点赞 收藏 ⭐留言 效果演示 文末获取源码 代码目录 主要代码实现 CSS样式
html,
body {height: 100%;width: 100%;overflow: hidden;padding: 0;margin: 0;
}.slider {cursor: -webkit-grab;cursor: grab;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;width: 85vw;height: 100vh;display: -webkit-box;display: flex;-webkit-box-align: center;align-items: center;margin-left: auto;margin-right: auto;
}.slider__slides {display: -webkit-box;display: flex;
}.slide {--h: 35vw;--w: calc(var(--h) * var(--m));display: -webkit-box;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;flex-direction: column;margin-right: 6rem;overflow: hidden;
}.slide__inner {position: relative;height: var(--h);width: var(--w);overflow: hidden;
}.slide__img {position: absolute;top: 0;left: -50px;right: -50px;bottom: 0;background-color: rgba(255, 255, 255, 0.1);
}.slide__img img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;-o-object-fit: cover;object-fit: cover;pointer-events: none;
}
JavaScript代码 :
!DOCTYPE html
html langenheadmeta charsetUTF-8titleH5图片列表滑动特效/titlelink relstylesheet hrefcss/style.css/headbodydiv classslider | js-sliderdiv classslider__slides | js-slidesdiv classslide | js-slide style--m: 1.6;div classslide__innerdiv classslide__img | js-slide-imgimg srcimg/1.jpg alt/div/div/divdiv classslide | js-slide style--m: 1;div classslide__innerdiv classslide__img | js-slide-imgimg srcimg/2.jpg alt/div/div/divdiv classslide | js-slide style--m: 0.85;div classslide__innerdiv classslide__img | js-slide-imgimg srcimg/3.jpg alt/div/div/divdiv classslide | js-slide style--m: 1.5;div classslide__innerdiv classslide__img | js-slide-imgimg srcimg/2.jpg alt/div/div/divdiv classslide | js-slide style--m: 1.25;div classslide__innerdiv classslide__img | js-slide-imgimg srcimg/1.jpg alt/div/div/divdiv classslide | js-slide style--m: 1.6;div classslide__innerdiv classslide__img | js-slide-imgimg srcimg/3.jpg alt/div/div/divdiv classslide | js-slide style--m: 1;div classslide__innerdiv classslide__img | js-slide-imgimg srcimg/1.jpg alt/div/div/divdiv classslide | js-slide style--m: 0.85;div classslide__innerdiv classslide__img | js-slide-imgimg srcimg/2.jpg alt/div/div/divdiv classslide | js-slide style--m: 1.5;div classslide__innerdiv classslide__img | js-slide-imgimg srcimg/3.jpg alt/div/div/divdiv classslide | js-slide style--m: 1.25;div classslide__innerdiv classslide__img | js-slide-imgimg srcimg/1.jpg alt/div/div/div/div/divscript srcjs/gsap.min.js/scriptscript srcjs/lodash.min.js/scriptscript srcjs/script.js/script/body/html
上面的图片可以自己替换成喜欢的样子 源码获取 大家点赞、收藏、关注、评论我啦 、查看博主主页或下方微信公众号获取更多~ 打卡 文章 更新 51 / 100天 精彩推荐更新中 HTML5大作业实战案例《100套》 Java毕设项目精品实战案例《100套》
