首頁猿問如何使用按鈕管理 CSS 輪播？

如何使用按鈕管理 CSS 輪播？

JavaScript

米脂 2023-10-14 19:01:24

我正在嘗試制作一個圖像輪播，它可以自行滑動，但也可以通過箭頭按鈕控制。我添加了控制滑塊滑動動畫的關鍵幀，但對于按鈕，我不知道從哪里開始。有什么方法可以使用javascript將此功能添加到按鈕嗎？.carousel { overflow: hidden;}.carousel figure { position: relative; width: 600vw; animation: 35s slider infinite; display: table; margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0; margin-inline-end: 0;}.carousel figure img { width: 100vw;}@keyframes slider { 0% { left: 0vw; } 14% { left: 0vw; } 15% { left: -100vw; } 29% { left: -100vw; } 30% { left: -200vw; } 44% { left: -200vw; } 45% { left: -300vw; } 59% { left: -300vw; } 60% { left: -400vw; } 74% { left: -400vw; } 75% { left: -500vw; } 90% { left: -500vw; } 100% { left: 0vw; }}.main_carousel_right_arrow { font-size: 2vw; padding: 5vw 2vw; background-color: rgb(255, 255, 255); top: 6%; position: absolute; right: 0px; border-top-left-radius: 5px; border-bottom-left-radius: 5px;}.main_carousel_left_arrow { font-size: 2vw; padding: 5vw 2vw; background-color: rgb(255, 255, 255); top: 6%; position: absolute; left: 0px; border-top-right-radius: 5px; border-bottom-right-radius: 5px;}

查看完整描述

1 回答

月關寶盒

TA貢獻1772條經驗獲得超5個贊

您的滑塊的問題是完整的動畫周期 = 1 次迭代，這意味著和back按鈕forward不能與此滑塊一起使用，就像默認情況下一樣。我刪除了你的@keyframes算法，將其替換為setInterval().

滑塊完全用 JavaScript 編寫。

還可以添加transition: 1s以.carousel figure實現平滑的幻燈片過渡。

在上一個任務中，我建議您display: table在選擇器中使用.carousel figure?，F在您需要將其替換為display: flex.

let anime = document.querySelector('.carousel figure');

let left = document.querySelector('.main_carousel_left_arrow');

let right = document.querySelector('.main_carousel_right_arrow');

var step = 0;

function animate() {

? if (step > -600) {

? ? ? anime.style.transform = 'translateX('+ step +'vw)';

? ? } else {

? ? ? anime.style.transform = 'transformX(100vw)';

? ? ? step = 100;

? }

}

setInterval(function () {

? ?step = step - 100;

? ?animate();

}, 7000);

right.onclick = function() {

? step = step - 100;

? animate();?

}

left.onclick = function() {

? step = step + 100;

? animate();

}

.carousel {

? overflow: hidden;

}

.carousel figure {

? position: relative;

? width: 600vw;

? transition: 1s;

? display: flex;

? margin: 0;

}

.carousel figure img {

? width: 100vw;

}

.main_carousel_right_arrow {

? font-size: 2vw;

? padding: 5vw 2vw;

? background-color: rgb(255, 255, 255);

? top: 6%;

? position: absolute;

? right: 0px;

? border-top-left-radius: 5px;

? border-bottom-left-radius: 5px;

}

.main_carousel_left_arrow {

? font-size: 2vw;

? padding: 5vw 2vw;

? background-color: rgb(255, 255, 255);

? top: 6%;

? position: absolute;

? left: 0px;

? border-top-right-radius: 5px;

? border-bottom-right-radius: 5px;

}

? <figure>

? ? <a href="#"><img src="https://rukminim1.flixcart.com/flap/1688/280/image/a341a61df77a5715.jpg?q=50"></a>

? ? <a href="#"><img src="https://rukminim1.flixcart.com/flap/1688/280/image/971922653b729a9e.jpg?q=50"></a>

? ? <a href="#"><img src="https://rukminim1.flixcart.com/flap/1688/280/image/4075d3bac7ced1e9.jpg?q=50"></a>

? ? <a href="#"><img src="https://rukminim1.flixcart.com/flap/1688/280/image/411e38f49c1486b4.jpg?q=50"></a>

? ? <a href="#"><img src="https://rukminim1.flixcart.com/flap/1688/280/image/8c30d1a38636e9fa.jpg?q=50"></a>

? ? <a href="#"><img src="https://rukminim1.flixcart.com/flap/1688/280/image/ce435d49852d2b8c.jpg?q=50"></a>

? </figure>

? <div>

? ? <span class="main_carousel_left_arrow"><i class="fas fa-arrow-left"></i></span>

? ? <span class="main_carousel_right_arrow"><i class="fas fa-arrow-right"></i></span>

? </div>

</div>

反對回復 2023-10-14

1 回答
0 關注
112 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何使用按鈕管理 CSS 輪播？

如何使用按鈕管理 CSS 輪播？

1 回答

添加回答