HTML+CSS+JS实现 ❤️电商商品图片幻灯片特效❤️

效果演示：

代码目录：

主要代码实现：

CSS样式：

*,
*::after,
*::before {box-sizing: border-box;
}html {background: #fff;
}body {--color-text: #000;--color-bg: #fff;--color-link: #000;--color-link-hover: #858585;--color-nav-bg: #fff;--color-nav-hover: #858585;--color-cart-bg: #000;--color-cart: #fff;--color-details-hover: #858585;font-family: Futura, "Trebuchet MS", Arial, sans-serif;min-height: 100vh;color: #57585c;color: var(--color-text);background-color: #fff;background-color: var(--color-bg);-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {-webkit-appearance: button;cursor: pointer;
}a {text-decoration: none;color: var(--color-link);outline: none;
}a:hover,
a:focus {color: var(--color-link-hover);
}button:focus,
a:focus {outline: none;
}.hidden {position: absolute;overflow: hidden;width: 0;height: 0;pointer-events: none;
}/* Icons */.icon {display: block;width: 1.5em;height: 1.5em;margin: 0 auto;fill: currentColor;
}main {position: relative;width: 100%;
}.content {text-align: center;
}.info {display: block;max-width: 260px;margin: 0 1rem;font-weight: bold;
}.page-header__title {font-size: 1rem;margin: 0;
}.page-header__title-inner {position: relative;line-height: 1.25;margin: 0 0.5rem 0 0;padding: 0 1rem 0 0;
}.page-header__title-inner::after {content: "";right: 0;width: 3px;height: 1.25rem;background: currentColor;position: absolute;
}.page-header__title-sub {position: relative;
}.social {display: none;
}.social__item {display: block;font-size: 0.75rem;margin: 0 0.25rem;
}.slideshow {position: relative;width: 100%;margin-top: 1rem;
}.slideshow::after {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.4);z-index: 1000;opacity: 0;transition: opacity 0.4s;
}.slideshow--details::after {opacity: 1;
}.slide {width: 100%;height: 50vh;top: 0;left: 0;position: absolute;overflow-x: hidden;pointer-events: none;opacity: 0;
}.slide--current {opacity: 1;z-index: 999;pointer-events: auto;position: relative;
}.slide__wrap {width: 100%;height: 50vh;overflow: hidden;position: relative;
}.slide__bg,
.slide__img {width: 100%;height: 100%;left: 0;top: 0;background-color: white;background-size: cover;background-position: 50% 50%;position: absolute;pointer-events: none;
}.slide__bg {filter: grayscale(1) brightness(0.7);
}.slide__title-wrap {padding: 2rem 1rem 0;text-align: center;position: absolute;width: 100%;height: 100%;top: 0;left: 0;
}.slide__title {margin: 0;font-size: 3.5rem;line-height: 0.9;white-space: pre;text-align: left;
}.slide__title span {display: inline-block;
}.slide__subtitle {font-size: 1.15rem;font-weight: normal;text-align: left;
}.boxnav {position: absolute;bottom: 0;left: 0;display: flex;z-index: 1000;width: 100%;
}.boxnav__item {display: flex;align-items: center;justify-content: center;background: var(--color-nav-bg);border: 0;height: 4rem;flex: 1;
}.boxnav__item--prev:hover,
.boxnav__item--next:hover {color: var(--color-nav-hover);
}.boxnav__item:focus {outline: none;
}.boxnav__label {padding: 0 0.5rem;font-size: 1.15rem;position: relative;
}.boxnav__label--total::before {content: "";position: absolute;right: 100%;top: 0;width: 2px;height: 1.45rem;background: #000;transform: rotate(22.5deg);
}.icon--caret-rot {transform: rotate(180deg);
}.details-wrap {position: relative;pointer-events: none;width: 100%;z-index: 10000;
}.details {position: absolute;top: 0;right: 0;width: 100%;display: grid;grid-auto-rows: 80px;overflow: hidden;
}.details-wrap--open .details--current {pointer-events: auto;
}.details__item {overflow: hidden;
}.details__item--addtocart {grid-row: 4;
}.details__inner {width: 100%;height: 100%;
}.details__inner {display: flex;align-items: center;justify-content: space-around;transform: translate3d(100%, 0, 0);
}.details__item-img {display: none;
}.details__inner--sizes {background: #d4d4d4;
}.details__size {position: relative;cursor: pointer;
}.details__size--selected::before {content: "";position: absolute;width: 2rem;height: 2rem;top: 50%;left: 50%;margin: -1rem 0 0 -1rem;border: 2px solid #333;border-radius: 50%;
}.details__size--disabled {color: #d42d2d;cursor: not-allowed;
}.details__inner--price {background: #6ff8ed;color: rgb(2, 2, 2);font-size: 1.55rem;
}.details__inner--colors {background: rgba(255, 255, 255, 0.007);backdrop-filter: blur(20px);
}.details__color {width: 1.5rem;height: 1.5rem;overflow: hidden;color: transparent;border-radius: 50%;align-self: center;justify-self: center;cursor: pointer;
}.details__color--WhiteBlack {background: rgb(255, 255, 255);background: linear-gradient( 90deg, rgba(255, 255, 255, 1) 20%, rgba(0, 0, 0, 1) 100%);
}.details__color--BeigeGray {background: rgb(240, 190, 143);background: linear-gradient( 90deg, rgb(240, 190, 143) 20%, rgb(92, 84, 84) 100%);
}.details__color--BlueBlack {background: rgb(16, 134, 245);background: linear-gradient( 90deg, rgb(16, 134, 245) 20%, rgba(0, 0, 0, 1) 100%);
}.details__color--PinkBlack {background: rgb(134, 16, 245);background: linear-gradient( 90deg, rgb(134, 16, 245) 20%, rgba(0, 0, 0, 1) 100%);
}.details__color--WhiteRedBlue {background: rgb(255, 255, 255);background: linear-gradient( 90deg, rgba(255, 255, 255, 1) 10%, rgba(121, 9, 9, 1) 45%, rgba(0, 212, 255, 1) 100%);
}.details__color--WhiteGreenBlack {background: rgb(255, 255, 255);background: linear-gradient( 90deg, rgba(255, 255, 255, 1) 10%, rgb(4, 233, 138) 45%, rgb(0, 0, 0) 100%);
}.details__color--red {background: #ff0000;
}.details__color--green {background: #32f8a5;
}.details__color--sky {background: #add8e6;
}.details__inner--grid {display: grid;padding: 1rem;grid-template-columns: repeat(3, 1fr);
}.action {border: 0;padding: 0;flex: 1;align-self: stretch;background: none;
}.action--addtocart {background: #6ff8ed;color: var(--color-cart-bg);
}.action--close {background: var(--color-cart-bg);color: #6ff8ed;text-transform: lowercase;
}.action--details {position: absolute;z-index: 3000;top: 100%;font-weight: bold;font-size: 1.15rem;width: 100%;background: #000;padding: 1rem;color: #fff;
}@media screen and (min-width: 53em) {body {padding: 0;}.content {position: relative;display: flex;justify-content: center;align-items: center;margin: 0 auto;min-height: 100vh;text-align: left;}.content--fixed {position: fixed;z-index: 10000;top: 0;left: 0;display: grid;align-content: space-between;width: 100%;max-width: none;min-height: 0;height: 100vh;padding: 1.5rem 4rem 2rem;pointer-events: none;align-items: start;grid-template-columns: 50% 50%;grid-template-rows: auto auto auto;grid-template-areas: "pageheader ..." "... ..." "tagline ...";}.page-header {grid-area: pageheader;align-self: start;justify-self: start;position: relative;display: flex;padding: 1.25rem 1.5rem 1.25rem 0;pointer-events: none;}.page-header::before {content: "";background: #000;width: calc(100% + 4rem);height: 100%;position: absolute;left: -4rem;top: 0;transform: translate3d(-100%, 0, 0) translate3d(2rem, 0, 0);transition: transform 0.3s;pointer-events: auto;}.page-header:hover::before {transform: translate3d(0, 0, 0);}.page-header::after {content: "";width: 17rem;height: 100%;position: absolute;left: -2rem;top: 0;pointer-events: auto;}.page-header__title {transition: color 0.3s;}.page-header:hover .page-header__title {color: #fff;}.social {display: flex;list-style: none;margin: 0 0 0 3rem;padding: 0;position: relative;opacity: 0;pointer-events: none;transition: opacity 0.3s;}.social__item-link {color: #fff;}.icon--social {opacity: 0;transform: translate3d(0, 150%, 0);transition: opacity 0.2s linear, transform 0.8s cubic-bezier(0.2, 1, 0.3, 1);transition-delay: 0.05s;}.icon--instagram {transition-delay: 0.1s;}.icon--facebook {transition-delay: 0.15s;}.page-header:hover .social {opacity: 1;pointer-events: auto;}.page-header:hover .social__item-link .icon {opacity: 1;transform: translate3d(0, 0, 0);}.content--fixed a {pointer-events: auto;}.tagline {margin: 0;grid-area: tagline;-webkit-writing-mode: vertical-rl;writing-mode: vertical-rl;transform: rotate(180deg);}.slideshow {overflow: hidden;margin: 0;height: 100vh;}.slide {height: 100vh;}.slide__title-wrap {padding: calc(6rem + 10vh) 0 0 4rem;text-align: left;}.slide__title {font-size: 4.5vw;}.slide__subtitle {margin: 1rem 0 0 0.2rem;max-width: 300px;}.slide__wrap {height: 100%;position: absolute;}.slide__bg,.slide__img {background-position: 50% 70%;}.boxnav {left: auto;right: 60vw;width: auto;}.boxnav__item {width: 10vw;height: 12vw;flex: none;}.details-wrap {position: absolute;top: 0;right: 0;pointer-events: none;}.details {width: auto;grid-template-columns: 8rem 15rem 200px;grid-template-rows: 125px 125px 7rem 3.5rem;}.details__item-img {display: block;grid-area: 1 / 3 / 3 / 4;max-width: 100%;}.details__item-sizes {grid-area: 1 / 2 / 2 / 3;}.details__item-price {grid-area: 1 / 1 / 2 / 2;}.details__item-colors {grid-area: 2 / 2 / 3 / 3;}.details__item--addtocart {grid-area: 3 / 3 / 4 / 4;}.details__item--close {grid-area: 4 / 3 / 5 / 4;}.details__inner--grid {grid-template-columns: repeat(3, 1.5rem);}.action--details {top: calc(6rem + 10vh);right: 4rem;left: auto;background: none;color: inherit;width: auto;padding: 0;}.action--details:hover {color: var(--color-details-hover);}
}

部分HTML代码 :

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>eCommerce Slide Effect -&gt; GSAP &amp; JS</title><link rel="stylesheet" href="css/normalize.min.css"><link rel="stylesheet" href="css/style.css"></head><body><svg class="hidden"><symbol id="icon-arrow" viewBox="0 0 24 24"><title>arrow</title><polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 " /></symbol><symbol id="icon-drop" viewBox="0 0 24 24"><title>drop</title><path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z" /><path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z" /></symbol><symbol id="icon-codepen" viewBox="0 0 24 24"><title>CodePen</title><path d="m24 7.598c-.044-.264-.08-.47-.36-.641-11.449-6.791-11.287-7.297-12.03-6.848-8.677 5.394-11.092 6.597-11.439 7.017-.315.323-.171.818-.171 8.298-.021.851 7.743 5.462 11.519 8.404.333.237.752.199 1.003-.029 11.224-7.956 11.497-7.636 11.478-8.375 0 0-.012-7.927 0-7.826zm-1.5 6.491-3.876-2.359 3.876-2.697zm-5.277-3.212-4.473-2.722v-6.07l9.126 5.555zm-5.223 3.633-3.876-2.697 3.876-2.359 3.876 2.359zm-.75-12.426v6.074c-1.739 1.079-3.209 1.98-4.451 2.734l-4.675-3.252zm-5.857 9.658c-1.874 1.127-3.098 1.843-3.893 2.32v-5.029zm1.33.924 4.527 3.149v5.999l-9.126-6.349zm6.027 9.149v-5.999l4.527-3.149 4.599 2.799z" /></symbol><symbol id="icon-cart"><title>cart</title><path d="M11 21c0 1.105-0.895 2-2 2s-2-0.895-2-2c0-1.105 0.895-2 2-2s2 0.895 2 2z"></path><path d="M22 21c0 1.105-0.895 2-2 2s-2-0.895-2-2c0-1.105 0.895-2 2-2s2 0.895 2 2z"></path><path d="M23.8 5.4c-0.2-0.3-0.5-0.4-0.8-0.4h-16.2l-0.8-4.2c-0.1-0.5-0.5-0.8-1-0.8h-4c-0.6 0-1 0.4-1 1s0.4 1 1 1h3.2l0.8 4.2c0 0 0 0.1 0 0.1l1.7 8.3c0.3 1.4 1.5 2.4 2.9 2.4 0 0 0 0 0.1 0h9.7c1.5 0 2.7-1 3-2.4l1.6-8.4c0-0.3 0-0.6-0.2-0.8zM20.4 14.2c-0.1 0.5-0.5 0.8-1 0.8h-9.7c-0.5 0-0.9-0.3-1-0.8l-1.5-7.2h14.6l-1.4 7.2z"></path></symbol><symbol id="icon-caret" viewBox="0 0 16 24"><title>caret</title><path d="M15.45 2.8L12.65 0l-12 12 12 12 2.8-2.8-9.2-9.2z" /></symbol>
</svg><main><div class="content content--fixed"><div class="page-header"><h1 class="page-header__title"><span class="page-header__title-inner">LikeNuShus</span><span class="page-header__title-sub">man &amp; woman</span></h1><ul class="social"><li class="social__item"><a class="social__item-link" href="https://www.17sucai.com/" target="_blank"><svg class="icon icon--social icon--codepen"><use xlink:href="#icon-codepen"></use></svg></a></li></ul></div><p class="tagline">轻用鞋，便宜！</p></div><div class="slideshow"><div class="slide"><div class="slide__wrap"><div class="slide__img" style="background-image: url(img/1.jpg);"></div><div class="slide__title-wrap"><h3 class="slide__title">Asics</h3><h4 class="slide__subtitle">#AnimaSanaInCorporeSano.</h4></div></div></div><div class="slide"><div class="slide__wrap"><div class="slide__img" style="background-image: url(img/2.jpg);"></div><div class="slide__title-wrap"><h3 class="slide__title">Adidas</h3><h4 class="slide__subtitle">#ImpossibleIsNothing</h4></div></div></div><div class="slide"><div class="slide__wrap"><div class="slide__img" style="background-image: url(img/3.jpg);"></div><div class="slide__title-wrap"><h3 class="slide__title">Nike</h3><h4 class="slide__subtitle">#JustDoIt</h4></div></div></div></div><!-- /slideshow --><nav class="boxnav"><button class="boxnav__item boxnav__item--prev"><svg class="icon icon--caret"><use xlink:href="#icon-caret"></use></svg></button><div class="boxnav__item boxnav__item--label"><span class="boxnav__label boxnav__label--current">1</span><span class="boxnav__label boxnav__label--total"></span></div><button class="boxnav__item boxnav__item--next"><svg class="icon icon--caret-rot"><use xlink:href="#icon-caret"></use></svg></button></nav><button class="action action--details">+ 查看详情</button><!-- details --><div class="details-wrap"><div class="details"><div class="details__item details__item-img" data-direction="ttb"><div class="details__inner"><img src="img/s1.jpg" alt="Some image" /></div></div><div class="details__item details__item-sizes"><div class="details__inner details__inner--sizes"><span class="details__size">6</span><span class="details__size">6.5</span><span class="details__size details__size--selected">7</span><span class="details__size">7.5</span><span class="details__size">8</span><span class="details__size">9</span><span class="details__size details__size--disabled">9.5</span><span class="details__size">10</span></div></div><div class="details__item details__item--addtocart" data-direction="ttb"><div class="details__inner"><button class="action action--addtocart"><svg class="icon icon--cart"><use xlink:href="#icon-cart"></use></svg></button></div></div><div class="details__item details__item-colors" data-direction="ttb"><div class="details__inner details__inner--grid details__inner--colors"><span class="details__color details__color--BeigeGray">Beige and Gray</span><span class="details__color details__color--red">Red</span><span class="details__color details__color--green">Green</span></div></div><div class="details__item details__item-price"><div class="details__inner details__inner--price">$65</div></div><div class="details__item details__item--close" data-direction="ttb"><div class="details__inner"><button class="action action--close">关闭</button></div></div></div><!-- /details --><div class="details"><div class="details__item details__item-img" data-direction="ttb"><div class="details__inner"><img src="img/s2.jpg" alt="Some image" /></div></div><div class="details__item details__item-sizes"><div class="details__inner details__inner--sizes"><span class="details__size">6</span><span class="details__size details__size--disabled">6.5</span><span class="details__size">7</span><span class="details__size">7.5</span><span class="details__size details__size--selected">8</span><span class="details__size">9</span><span class="details__size details__size--disabled">9.5</span><span class="details__size details__size--disabled">10</span></div></div><div class="details__item details__item--addtocart" data-direction="ttb"><div class="details__inner"><button class="action action--addtocart"><svg class="icon icon--cart"><use xlink:href="#icon-cart"></use></svg></button></div></div><div class="details__item details__item-colors" data-direction="ttb"><div class="details__inner details__inner--grid details__inner--colors"><span class="details__color details__color--WhiteBlack">White and Black</span><span class="details__color details__color--BlueBlack">Blue and Black</span><span class="details__color details__color--PinkBlack">Pink and Black</span></div></div><div class="details__item details__item-price"><div class="details__inner details__inner--price">$30</div></div><div class="details__item details__item--close" data-direction="ttb"><div class="details__inner"><button class="action action--close">关闭</button></div></div></div><!-- /details --><div class="details"><div class="details__item details__item-img" data-direction="ttb"><div class="details__inner"><img src="img/s3.jpg" alt="Some image" /></div></div><div class="details__item details__item-sizes"><div class="details__inner details__inner--sizes"><span class="details__size">6</span><span class="details__size details__size--disabled">6.5</span><span class="details__size">7</span><span class="details__size details__size--disabled">7.5</span><span class="details__size">8</span><span class="details__size details__size--selected">9</span><span class="details__size details__size--disabled">9.5</span><span class="details__size">10</span></div></div><div class="details__item details__item--addtocart" data-direction="ttb"><div class="details__inner"><button class="action action--addtocart"><svg class="icon icon--cart"><use xlink:href="#icon-cart"></use></svg></button></div></div><div class="details__item details__item-colors" data-direction="ttb"><div class="details__inner details__inner--grid details__inner--colors"><span class="details__color details__color--WhiteRedBlue">White with Red and Blue trim</span><span class="details__color details__color--WhiteGreenBlack">White with Green and Black trim</span><span class="details__color details__color--sky">Sky</span></div></div><div class="details__item details__item-price"><div class="details__inner details__inner--price">$45</div></div><div class="details__item details__item--close" data-direction="ttb"><div class="details__inner"><button class="action action--close">关闭</button></div></div></div><!-- /details --></div></main><script src='js/gsap.min.js'></script><script src='js/imagesloaded.pkgd.min.js'></script><script src="js/script.js"></script></body></html>

上面的img图片和js等需要引入即可运行

源码获取

查看博主主页或私信博主获取

精彩推荐更新中：

HTML5大作业实战100套

打卡文章更新 39 / 100天

大家可以点赞、收藏、关注、评论我啦、需要完整文件随时联系我或交流哟~！

HTML+CSS+JS实现 ❤️电商商品图片幻灯片特效❤️相关推荐

php侧边栏导航效果,原生js实现电商侧边导航效果
知识要点实现原理: 1.点击楼层跳相应楼层,用的是锚点定位电梯:2F 个护家清列表title: 这个没什么好说的 2.当点击楼层跳到相应楼层时,该楼层高亮显示我们的脚本主要就是实现这个功能. ...
html大作业网页代码化妆品购物商城网站设计——电商类化妆品购物商城(1页) HTML+CSS+JavaScript 关于电商类的HTML网页设计-----化妆品
HTML5期末大作业:化妆品购物商城网站设计--电商类化妆品购物商城(1页) HTML+CSS+JavaScript 关于电商类的HTML网页设计-----化妆品常见网页设计作业题材文章目录 HT ...
8000字讲清楚从0到1搭建电商商品中心（建议收藏）
<电商产品经理从0到1>系列文章面向0~3岁的产品经理或者有多年产品工作经验却刚接触电商领域的产品经理. 本系列文章将详细介绍电商核心系统的产品设计方案,帮助你体系化地认识电商产品. 看完 ...
陈宏申：浅谈京东电商商品文案挖掘难点与优化实践
导读: 在电商推荐中,除了推送商品的图片和价格信息外,文案也是商品非常重要的维度.基于编码器解码器范式的序列文本生成模型是文案挖掘的核心,但该种方法面临着两大技术挑战:一是文案生成结果不可靠和生成质量 ...
巨人java生鲜app下载_Java生鲜电商平台-生鲜电商商品中心系统设计与数据库架构（生鲜小程序/APP）...
Java生鲜电商平台-生鲜电商商品中心系统设计与数据库架构(生鲜小程序/APP) 说明:Java生鲜电商平台-生鲜电商商品中心系统设计与数据库架构(生鲜小程序/APP) 日日鲜-商品中心系统设计项目 ...
Solr应用之电商商品搜索备忘
把以前做电商商品搜索的经验归档一下.电商的搜索功能大体上比较相同,从京东.苏宁.易讯等大型电商都可以观察出来.电商搜索功能大致分为几块: 1. 商品搜索.列表的展示,带排序功能:可能有些产品会要求一个 ...
HTML5期末大作业：爱折扣电商购物网站设计——清新爱折扣电商购物网站(5页) HTML+CSS+JavaScript 关于电商的HTML网页设计-----网购
HTML5期末大作业:爱折扣电商购物网站设计--清新爱折扣电商购物网站(5页) HTML+CSS+JavaScript 关于电商的HTML网页设计-----网购常见网页设计作业题材有个人. 美食. ...
HTML5期末大作业：化妆品购物商城网站设计——电商类化妆品购物商城(1页) HTML+CSS+JavaScript 关于电商类的HTML网页设计-----化妆品
HTML5期末大作业:化妆品购物商城网站设计--电商类化妆品购物商城(1页) HTML+CSS+JavaScript 关于电商类的HTML网页设计-----化妆品常见网页设计作业题材有个人. 美食 ...
html5 css3 图片画廊,js和CSS3 3D立方体图片画廊特效
这是一款js和CSS3 3D立方体图片画廊特效.该3D立方体图片画廊特效通过CSS3进行布局,构建立方体,然后通过简单的js代码来完成点击缩略图进行立方体旋转的操作. 由于该该3D立方体图片画廊特效中 ...

HTML+CSS+JS实现 ❤️电商商品图片幻灯片特效❤️

效果演示：

代码目录：

主要代码实现：

CSS样式：

部分HTML代码 :

源码获取

HTML5大作业实战100套

HTML+CSS+JS实现 ❤️电商商品图片幻灯片特效❤️相关推荐

最新文章

热门文章