尝试制作一个无限旋转木马，它会以我选择的位置为中心。 旋转木马应该循环，我目前只在一侧实现了效果我的主要问题是过渡是可见的。
我需要实现的效果是，当您单击旋转木马时，循环是无限的，但您看不到从一端到另一端的闪烁，我对 Web 开发相对较新，因此将不胜感激。 提前致谢!
HTML:
<div class="content__bottom">
<div class="service__block" data-name="instagram" data-order="1">
<i class="service__block--icon fab fa-instagram"></i>
<h5 class="service__block--title">אינסטגרם</h5>
<i class="service__block--arrow fas fa-chevron-circle-up"></i>
</div>
<div class="service__block" data-name="facebook" data-order="2">
<i class="service__block--icon fab fa-facebook-f"></i>
<h5 class="service__block--title">פייסבוק</h5>
<i class="service__block--arrow fas fa-chevron-circle-up"></i>
</div>
<div class="service__block" data-name="youtube" data-order="3">
<i class="service__block--icon fab fa-youtube"></i>
<h5 class="service__block--title">יוטיוב</h5>
<i class="service__block--arrow fas fa-chevron-circle-up"></i>
</div>
<div class="service__block" data-name="twitch" data-order="4">
<i class="service__block--icon fab fa-twitch"></i>
<h5 class="service__block--title">טוויץ</h5>
<i class="service__block--arrow fas fa-chevron-circle-up"></i>
</div>
<div class="service__block" data-name="twitter" data-order="5">
<i class="service__block--icon fab fa-twitter"></i>
<h5 class="service__block--title">טוויטר</h5>
<i class="service__block--arrow fas fa-chevron-circle-up"></i>
</div>
<div class="service__block" data-name="pinterest" data-order="6">
<i class="service__block--icon fab fa-pinterest"></i>
<h5 class="service__block--title">פינטרסט</h5>
<i class="service__block--arrow fas fa-chevron-circle-up"></i>
</div>
<div class="service__block" data-name="soundcloud" data-order="7">
<i class="service__block--icon fab fa-soundcloud"></i>
<h5 class="service__block--title">סאונדקלאוד</h5>
<i class="service__block--arrow fas fa-chevron-circle-up"></i>
</div>
<div class="service__block" data-name="spotify" data-order="8">
<i class="service__block--icon fab fa-spotify"></i>
<h5 class="service__block--title">ספוטיפי</h5>
<i class="service__block--arrow fas fa-chevron-circle-up"></i>
</div>
<div class="service__block" data-name="telegram" data-order="9">
<i class="service__block--icon fab fa-telegram-plane"></i>
<h5 class="service__block--title">טלגרם</h5>
<i class="service__block--arrow fas fa-chevron-circle-up"></i>
</div>
<div class="service__block" data-name="tumblr" data-order="10">
<i class="service__block--icon fab fa-tumblr"></i>
<h5 class="service__block--title">טאמבלר</h5>
<i class="service__block--arrow fas fa-chevron-circle-up"></i>
</div>
</div>
SCSS:
* {
margin: 0;
padding: 0;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: 62.5%; // 1rem = 10px, 10px/16px = 62.5%
}
body {
max-height: 100vh;
font-family: 'Arimo', sans-serif;
font-weight: 400;
line-height: 1.6;
background-color: #f8f8f8;
// overflow: hidden;
overflow-x: hidden;
}
.content__bottom {
margin-top: 3%;
width: 100vw;
height: auto;
padding: 2% 2%;
display: flex;
}
.service__block {
cursor: pointer;
position: absolute;
width: 210px;
height: 200px;
display: flex;
flex-direction: column;
align-items: center;
padding: 3rem 5rem;
border-radius: 3.5rem;
border: 1px solid transparent;
background-color: white;
box-shadow: 5px 5px 20px rgba($color: black, $alpha: 0.05);
transition: all 0.5s;
&[data-order='0'] {
right: -17.5%;
display: none;
opacity: 0;
z-index: -1;
transition: none;
}
&[data-order='1'] {
right: -5.5%;
}
&[data-order='2'] {
right: 6.5%;
}
&[data-order='3'] {
right: 18.5%;
}
&[data-order='4'] {
right: 30.5%;
}
&[data-order='5'] {
right: 42.5%;
}
&[data-order='6'] {
right: 54.5%;
}
&[data-order='7'] {
right: 66.5%;
}
&[data-order='8'] {
right: 78.5%;
}
&[data-order='9'] {
right: 90.5%;
}
&[data-order='10'] {
right: 102.5%;
}
&[data-order='11'] {
right: 114.5%;
display: none;
z-index: -1;
transition: none;
}
&--icon {
color: #adadad;
font-size: 7rem;
margin-bottom: 3rem;
transition: all 0.5s;
}
&--title {
color: #adadad;
font-size: 2.5rem;
transition: all 0.5s;
font-weight: 400;
}
&--arrow {
color: #4d48a8;
font-size: 3rem;
display: none;
opacity: 0;
transform: translateY(-5rem);
transition: all 0.5s;
cursor: pointer;
}
}
.service__block:hover {
.service__block--icon,
.service__block--title {
color: #707070;
}
}
.selected {
height: 250px;
border: 1px solid #4d48a8;
.service__block--title {
color: #4d48a8;
margin-bottom: 2rem;
}
.service__block--icon {
color: #4d48a8;
}
.service__block--arrow {
display: block;
transform: translateY(0);
opacity: 1;
}
&:hover {
.service__block--title {
color: #4d48a8;
}
.service__block--icon {
color: #4d48a8;
}
}
}
JS:
const serviceList = document.querySelectorAll('.service__block');
serviceList.forEach(service => {
service.addEventListener('click', () => {
markSelectedService(service);
checkDistance(service);
moveService(checkDistance(service));
});
});
//Adds the class to the clicked service
function markSelectedService(service) {
removeSelectedClass();
service.classList.add('selected');
}
//Removes the selected class from all the services
function removeSelectedClass() {
serviceList.forEach(service => {
service.classList.remove('selected');
});
}
function moveServices(service) {
//Check Service distance from center
checkDistance(service);
//Check if service is outside view
//Check last position of serviceList
//If service is outside view disable display
//Move service to end of the serviceList
//Enable visiblity
}
//Check distance from center
function checkDistance(service) {
let distance = service.dataset.order - 4;
return distance;
}
//Check if service is outside view
//Services 1 to 9 are visible the rest are outside the view
function checkIfVisible() {
serviceList.forEach(service => {
if (
parseInt(service.dataset.order) > 0 &&
parseInt(service.dataset.order) < 11
) {
service.style.display = 'flex';
} else {
service.style.display = 'none';
}
});
}
//Move the service 1 by 1 n times
function moveService(distance) {
if (distance > 0) {
for (var i = 0; i < distance; i++) {
serviceList.forEach(service => {
service.dataset.order = parseInt(service.dataset.order) - 1;
if (
parseInt(service.dataset.order) === 0 &&
service.dataset.name == 'instagram'
) {
service.dataset.order = 11;
service.dataset.order = checkServiceListLastPosition();
} else if (parseInt(service.dataset.order) === 0) {
service.dataset.order = 11;
service.dataset.order = checkServiceListLastPosition() + 1;
}
});
}
} else if (distance < 0) {
distance = distance * -1;
for (var i = 0; i < distance; i++) {
serviceList.forEach(service => {
service.dataset.order = parseInt(service.dataset.order) + 1;
});
}
}
}
//Check last position
function checkServiceListLastPosition() {
lastPosition = 0;
serviceList.forEach(service => {
if (
parseInt(service.dataset.order) > lastPosition &&
parseInt(service.dataset.order) !== 11
) {
lastPosition = parseInt(service.dataset.order);
}
});
console.log(lastPosition);
return lastPosition;
}
当前状态的代码笔: https://codepen.io/tomyshoam/pen/yLLLYyQ
最佳答案
您可以在当前 .service__block 之上创建另一个 css block ，以覆盖您的 data-order 1 block 的转换行为。
.service__block {
&[data-order='1'] {
right: -17.5%;
display: none;
opacity: 0;
z-index: -1;
transition: none;
}
}
关于javascript - 如何制作一个无限的 JS 轮播(无限问题)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58243505/