第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

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

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

米脂 2023-10-14 19:01:24
我正在嘗試制作一個(gè)圖像輪播，它可以自行滑動(dòng)，但也可以通過(guò)箭頭按鈕控制。我添加了控制滑塊滑動(dòng)動(dòng)畫的關(guān)鍵幀，但對(duì)于按鈕，我不知道從哪里開始。有什么方法可以使用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 回答

?
月關(guān)寶盒

TA貢獻(xiàn)1772條經(jīng)驗(yàn) 獲得超5個(gè)贊

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

滑塊完全用 JavaScript 編寫。

還可以添加transition: 1s以.carousel figure實(shí)現(xiàn)平滑的幻燈片過(guò)渡。

在上一個(gè)任務(wù)中，我建議您display: table在選擇器中使用.carousel figure。現(xiàn)在您需要將其替換為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;

}

<link rel="stylesheet" >

<div class="carousel">

? <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>


查看完整回答
反對(duì) 回復(fù) 2023-10-14
  • 1 回答
  • 0 關(guān)注
  • 120 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)