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

缺乏、安全感 2022-09-12 13:57 177阅读 0赞

生活中我们所见到的大部分图形都可以用css实现，今天给大家分享的是实现电商商品图片幻灯片特效。

效果演示：主页获取源码  
  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ5YeM6ZiB_size_20_color_FFFFFF_t_70_g_se_x_16]

代码目录：  
  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ5YeM6ZiB_size_20_color_FFFFFF_t_70_g_se_x_16 1]

主要代码实现：  
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__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;
    }
    .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__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__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--WhiteBlack { 
        background: rgb(255, 255, 255);
        background: linear-gradient( 90deg, rgba(255, 255, 255, 1) 20%, rgba(0, 0, 0, 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;
    }
        .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;
        }
        .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;
        }
        .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 -> GSAP & 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>
    </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 & 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>
            
            <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>
            
            <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>
                
                <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>
        </main>
    
        <script src='js/gsap.min.js'></script>
        <script src='js/imagesloaded.pkgd.min.js'></script>
        <script src="js/script.js"></script>
    
    </body>
    
    </html>
    复制代码

点赞支持、手留余香、与有荣焉，动动你发财的小手哟，感谢各位大佬能留下您的足迹。

如果你觉得这篇文章对你有点用的话，麻烦请给我们的开源项目点点star: [http://github.crmeb.net/u/defu][http_github.crmeb.net_u_defu]不胜感激 ！

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ5YeM6ZiB_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/890db166eb0b4139ab69f155dccbc5b4.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LuZ5YeM6ZiB_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/cf203eb6fb5e41b99e78aa92e271e2a2.png
[http_github.crmeb.net_u_defu]: http://github.crmeb.net/u/defu