【JavaScript】Js带小图的轮播大图效果，附源码
|
admin
2026年2月12日 10:59
本文热度 79
|
<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>展示轮播图</title> <link rel="stylesheet" href="index.css"></head>
<body> <div class="container"> <div class="slide"> <div class="item item1"> <div class="content"> <div class="name">Lorem Ipsum</div> <div class="des">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div> <button>See more</button> </div> </div> <div class="item item2"> <div class="content"> <div class="name">Lorem Ipsum</div> <div class="des">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div> <button>See more</button> </div> </div> <div class="item item3"> <div class="content"> <div class="name">Lorem Ipsum</div> <div class="des">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div> <button>See more</button> </div> </div> <div class="item item4"> <div class="content"> <div class="name">Lorem Ipsum</div> <div class="des">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div> <button>See more</button> </div> </div> <div class="item item5"> <div class="content"> <div class="name">Lorem Ipsum</div> <div class="des">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div> <button>See more</button> </div> </div> <div class="item item6"> <div class="content"> <div class="name">Lorem Ipsum</div> <div class="des">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div> <button>See more</button> </div> </div> </div> <div class="btns"> <div class="s-btn left"><</div> <div class="s-btn right">></div> </div> </div>
<script src="./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%; 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; 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);}.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; animation: show 1s ease-in-out 1 forwards;}.item .des { margin: 20px 0; opacity: 0; 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); }}
const left = document.querySelector('.left')const right = document.querySelector('.right')const slide = document.querySelector('.slide')right.addEventListener('click', function () { const items = document.querySelectorAll('.item') slide.appendChild(items[0])})left.addEventListener('click', function () { const items = document.querySelectorAll('.item') slide.prepend(items[items.length - 1])})
该文章在 2026/2/12 11:00:43 编辑过
400 186 1886
