js+css实现商品图片幻灯片左右滚动效果代码
代码语言:html
所属分类:幻灯片
代码描述:js+css实现商品图片幻灯片左右滚动效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.3.0.css"> <style> @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"); :root { --white: #fff; --light-grey: #b4b4b4; --dark-grey: #525252; --bg-color: #700550; --light-burg: #ffa4e4; --trans-bg: rgba(255, 255, 255, 0.5); --box-shadow: 0.3rem 0.3rem 0.5rem rgba(0, 0, 0, 0.4); } *, ::before, ::after { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--bg-color); font-family: "Open Sans", sans-serif; } .container { height: 30rem; width: 30rem; padding: 0.5rem; background: var(--trans-bg); border-radius: 0.5rem; box-shadow: var(--box-shadow); } .title { position: relative; color: var(--white); text-align: center; font-weight: 300; letter-spacing: 0.1rem; text-decoration: underline 0.3rem var(--light-burg); text-underline-offset: 0.3rem; } #products-wrapper { position: relative; display: flex; margin-top: 1rem; justify-content: space-between; align-items: center; } img { height: 15rem; object-fit: cover; } .img-cont { height: 15rem; width: 10rem; overflow: hidden; border-radius: 0.5rem; box-shadow: var(--box-shadow); transform: scale(1); } img { transform: scale(1); transition: transform 0.5s ease-in-out; } img:hover { transform: scale(1.3); transition: transform 0.5s ease-in-out; } .arrow { position: relative; margin: 0 0.5rem; font-size: 1.5rem; background: transparent; border: none; z-index: 1; cursor: pointer; } .prod-items { display: flex; justify-content: left; align-items: center; overflow-x: scroll; flex-wrap: nowrap; /* Track */ /* Handle */ } .prod-items::-webkit-scrollbar { height: 0.3rem; } .prod-items::-webkit-scrollbar-track { background: var(--bg-color); border-radius: 1rem; } .prod-items::-webkit-scrollbar-thumb { background: var(--white); border-radius: 0.5rem; background-clip: content-box; } .prod-item { display: flex; align-items: center; justify-content: center; flex-direction: column; font-size: 0.8rem; padding: 0.5rem 0.3rem 1rem 0.5rem; margin: 0 auto; } .item-name { margin-top: 0.5rem; font-weight: 500; font-size: 1rem; color: var(--white); text-align: center; } .addCart { text-decoration: none; color: #000; font-size: 0.8rem; padding: 0.3rem 1rem; border-radius: 0.3rem; background: var(--light-burg); margin-top: 0.5rem; } .addCart:active { box-shadow: var(--box-shadow); transform: translateY(0.2rem); } .addCart:hover { box-shadow: var(--box-shadow); background: var(--dark-grey); color: var(--white); } </style> </head> <body > <div class="container"> <h1 class="title">Our Products</h1> <section id="products-wrapper"> <button class="arrow left-btn"> <i class="fa-solid fa-circle-chevron-left"></i> </button> <div class="prod-items"></div> <button class="arrow right-btn"> <i class="fa-solid fa-circle-chevron-right"></i> </button> </section> </div> <script > const data = [ { imageUrl: "//repo.bfw.wiki/bfwrepo/image/5ff8f9e5b4e43.png", itemName: "Crown Shirt", euSize: "35-40", price: &qu.........完整代码请登录后点击上方下载按钮下载查看
网友评论0