夜雨聆风
Js带小图的轮播大图效果!!附源码!!
效果展示
完整源码
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>展示轮播图</title><linkrel="stylesheet"href="index.css"></head><body><!-- 容器 --><divclass="container"><!-- 图片容器 --><divclass="slide"><divclass="item item1"><divclass="content"><divclass="name">Lorem Ipsum</div><divclass="des">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div><button>See more</button></div></div><divclass="item item2"><divclass="content"><divclass="name">Lorem Ipsum</div><divclass="des">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div><button>See more</button></div></div><divclass="item item3"><divclass="content"><divclass="name">Lorem Ipsum</div><divclass="des">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div><button>See more</button></div></div><divclass="item item4"><divclass="content"><divclass="name">Lorem Ipsum</div><divclass="des">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div><button>See more</button></div></div><divclass="item item5"><divclass="content"><divclass="name">Lorem Ipsum</div><divclass="des">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div><button>See more</button></div></div><divclass="item item6"><divclass="content"><divclass="name">Lorem Ipsum</div><divclass="des">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div><button>See more</button></div></div></div><!-- 按钮 --><divclass="btns"><divclass="s-btn left"><</div><divclass="s-btn right">></div></div></div><scriptsrc="./index.js"></script></body></html>
* {margin: 0;padding: 0;box-sizing: border-box;}:root {background-color: #150c1a;overflow: hidden;}.container {width: 1100px;height: 700px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);padding: 50px;filter: drop-shadow(0 0 10px #dbdbdb);}.slide {/* 设置内容最大宽度 */width: max-content;display: flex;}.item {background-repeat: no-repeat;width: 200px;height: 300px;background-position: center;background-size: cover;position: absolute;top: 50%;/* 位移过渡导致动画卡顿 *//* transform: translateY(-50%); *//* 更换为 */margin-top: -150px;border-radius: 20px;transition: 0.5s;}.item:nth-child(1),.item:nth-child(2) {top: 0;left: 0;width: 100%;height: 100%;margin-top: 0;/* 覆盖上述y轴平移 *//* transform: translateY(0); */border-radius: 4px;box-shadow: none;}.item:nth-child(3) {left: 50%;}.item:nth-child(4) {left: calc(50% + 220px);}.item:nth-child(5) {left: calc(50% + 440px);}/* n为自然数 初值为0 依次+1递增 */.item:nth-child(n + 6) {opacity: 0;left: calc(50% + 660px);}.item .content {position: absolute;width: 300px;left: 100px;top: 50%;transform: translateY(-50%);color: #eee;display: none;}.item:nth-child(2) .content {display: block;}.item .name {font-size: 40px;font-weight: 900;opacity: 0;/* 动画名 执行时间 动画曲线 执行1次 保持最后执行的状态 */animation: show 1s ease-in-out 1 forwards;}.item .des {margin: 20px 0;opacity: 0;/* 动画名 执行时间 动画曲线 延时 执行1次 保持最后执行的状态 */animation: show 1s ease-in-out 0.3s 1 forwards;}.item button {padding: 10px 20px;border: none;opacity: 0;animation: show 1s ease-in-out 0.6s 1 forwards;}.btns {width: 100%;position: absolute;bottom: 50px;margin-left: -50px;display: flex;justify-content: center;}.s-btn {width: 50px;height: 50px;line-height: 50px;text-align: center;color: gray;background-color: #fff;font-size: 25px;border-radius: 50%;margin: 0 25px;cursor: pointer;font-weight: 900;border: 1px solid #555;transition: 0.5s;}.s-btn:hover {background-color: #ccc;}.item1 {background-image: url('./images/1.jpg');}.item2 {background-image: url('./images/2.jpg');}.item3 {background-image: url('./images/3.jpg');}.item4 {background-image: url('./images/4.jpg');}.item5 {background-image: url('./images/5.jpg');}.item6 {background-image: url('./images/6.jpg');}@keyframes show {from {opacity: 0;transform: translateY(100px);filter: blur(10px);}to {opacity: 1;transform: translateY(0);filter: blur(0);}}
// 获取domconst left = document.querySelector('.left')const right = document.querySelector('.right')const slide = document.querySelector('.slide')right.addEventListener('click', function () {// 每次更改后需要重新获取图片数组const items = document.querySelectorAll('.item')// 将第一位dom元素放置最后slide.appendChild(items[0])})left.addEventListener('click', function () {// 每次更改后需要重新获取图片数组const items = document.querySelectorAll('.item')// 将最后一位元素放置最前slide.prepend(items[items.length - 1])})
