如何解决我的Pure JS Touch轮播导航点无法正常工作
当我在第二张幻灯片上时,我的导航点还需要显示它在第二个点上。但是相反,它将第一个点显示为活动状态。但是,当我单击幻灯片本身(在滑动后)时,导航点会显示正确的位置。
我认为我需要触发一些东西,以增加点的索引值。但我不确定。我已经尝试了很多方法,但无法解决。
我尝试在dot[index].style.backgroundColor = "rgba(255,255,1)";
函数中添加dragStart()
var slider = document.getElementById('card-slider'),sliderItems = document.getElementById('card-slides');
function slide2(wrapper,items) {
var posX1 = 0,posX2 = 0,posInitial,posFinal,threshold = 100,slides = items.getElementsByClassName('card-slide'),slidesLength = slides.length,slideSize = items.getElementsByClassName('card-slide')[0].offsetWidth,firstSlide = slides[0],lastSlide = slides[slidesLength - 1],cloneFirst = firstSlide.cloneNode(true),cloneLast = lastSlide.cloneNode(true),index = 0,allowShift = true;
// Clone first and last slide
items.appendChild(cloneFirst);
items.insertBefore(cloneLast,firstSlide);
wrapper.classList.add('loaded');
// Mouse events
items.onmousedown = dragStart;
// Touch events
items.addEventListener('touchstart',dragStart);
items.addEventListener('touchend',dragEnd);
items.addEventListener('touchmove',dragAction);
// Transition events
items.addEventListener('transitionend',checkIndex);
//Dots
var dots = document.getElementsByClassName('dots')[0];
var dot = dots.getElementsByClassName('dot');
dot[0].style.backgroundColor = "rgba(255,1)";
function dragStart (e) {
e = e || window.event;
e.preventDefault();
posInitial = items.offsetLeft;
for(var i = 0; i < dot.length; i++) {
dot[i].style.backgroundColor='rgba(255,.3)';
}
dot[index].style.backgroundColor = "rgba(255,1)";
if (e.type == 'touchstart') {
posX1 = e.touches[0].clientX;
} else {
posX1 = e.clientX;
document.onmouseup = dragEnd;
document.onmousemove = dragAction;
}
}
function dragAction (e) {
e = e || window.event;
if (e.type == 'touchmove') {
posX2 = posX1 - e.touches[0].clientX;
posX1 = e.touches[0].clientX;
} else {
posX2 = posX1 - e.clientX;
posX1 = e.clientX;
}
items.style.left = (items.offsetLeft - posX2) + "px";
}
function dragEnd (e) {
posFinal = items.offsetLeft;
if (posFinal - posInitial < -threshold) {
shiftSlide(1,'drag');
} else if (posFinal - posInitial > threshold) {
shiftSlide(-1,'drag');
} else {
items.style.left = (posInitial) + "px";
}
document.onmouseup = null;
document.onmousemove = null;
}
function shiftSlide(dir,action) {
items.classList.add('shifting');
if (allowShift) {
if (!action) { posInitial = items.offsetLeft; }
if (dir == 1) {
items.style.left = (posInitial - slideSize) + "px";
index++;
} else if (dir == -1) {
items.style.left = (posInitial + slideSize) + "px";
index--;
}
};
allowShift = false;
}
function checkIndex (){
items.classList.remove('shifting');
if (index == -1) {
items.style.left = -(slidesLength * slideSize) + "px";
index = slidesLength - 1;
}
if (index == slidesLength) {
items.style.left = -(1 * slideSize) + "px";
index = 0;
}
allowShift = true;
}
}
slide2(slider,sliderItems);
* { box-sizing: border-box; }
body {
height: 100%;
background-color: #7656d6;
color: #333;
font-family: 'Roboto',sans-serif;
text-align: center;
letter-spacing: 0.15em;
font-size: 22px;
}
.card-slider {
width: 450px;
height:420px;
/*box-shadow: 3px 3px 10px rgba(0,.2);*/
}
.wrapper {
overflow:hidden;
position: relative;
width: 100%;
height:420px;
z-index: 1;
border-radius: 16px;
}
.card-slides {
display: flex;
position: relative;
top: 0;
left: -450px;
width: 10000px;
border-radius: 16px;
}
.card-slides.shifting {
transition: left .2s ease-out;
}
.card-slide {
width: 450px;
height:420px;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: center;
transition: all 1s;
position: relative;
background: transparent;
border-radius: 16px;
border-radius: 2px;
}
.slide-item {
background: white;
width: calc(100% - 4rem);
padding: 0 5rem;
border-radius: 16px;
margin: 0 auto;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active,.dot:hover {
background-color: red;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Slider</title>
</head>
<body id="body">
<div id="card-slider" class="card-slider">
<div class="wrapper">
<div id="card-slides" class="card-slides information-card">
<div class="card-slide">
<div class="slide-item">
<div class="card-item_badge">
1
</div>
<p class="card-item_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia explicabo perferendis quam rerum dignissimos deleniti?</p>
</div>
</div>
<div class="card-slide">
<div class="slide-item">
<div class="card-item_badge">
2
</div>
<p class="card-item_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe eligendi fuga,sed tempore expedita praesentium.</p>
</div>
</div>
<div class="card-slide">
<div class="slide-item">
<div class="card-item_badge">
3
</div>
<p class="card-item_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo laborum ipsa harum maiores. Nobis,dolore?</p>
</div>
</div>
</div>
</div>
<div class="dots">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
<script>
</script>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。