javascript - 在 Slider 上激活点
问题描述
我有这个使用纯 JS 创建的 Slider 示例。
滑块工作得很好。剩下要做的就是激活三个点,所以当第一张幻灯片打开时,第一个点激活,显示与其他点不同的颜色,依此类推。此外,您应该能够在单击点时打开正确的幻灯片,因此第一个点打开第一张幻灯片,第二个点打开第二张幻灯片,依此类推。
你能帮我实现这一目标吗?您可以在下面找到源代码。
const nextBtn = document.querySelector('.nextBtn');
const prevBtn = document.querySelector('.prevBtn');
const container = document.querySelector('.images');
const offers = document.getElementById('offers');
const link = document.getElementById('links');
let colors = ['#7f86ff', '#2932d1', '#00067f'];
let currentSlide = 0;
let texts = ['Change1', 'Change2', 'Change3'];
let currentText = 0;
let links = ['<a href="https:www.google.com">Link1</a>', '<a href="https:www.is.fi">Link2</a>', '<a href="https:www.betsson.com">Link3</a>'];
let currentLink = 0;
function updateSlide(direction) {
currentSlide =
(colors.length + currentSlide + direction)
% colors.length;
container.style.backgroundColor = colors[currentSlide];
container.animate([{opacity:'0.1'}, {opacity:'1.0'}],
{duration: 200, fill:'forwards'})
}
function updateText(direction) {
currentText =
(texts.length + currentText + direction)
% texts.length;
offers.innerHTML = texts[currentText];
offers.animate([{transform:'translateY(-50px)', opacity:'0.0'}, {transform:'translateY(0)', opacity:'1.0'}],
{duration: 200, fill:'forwards'})
}
function updateLink(direction) {
currentLink =
(links.length + currentLink + direction)
% links.length;
link.innerHTML = links[currentLink];
link.animate([{transform:'scale(0,0)'}, {transform:'scale(1.1)'}],
{duration: 200, fill:'forwards'})
}
updateSlide(0);
updateText(0);
updateLink(0);
nextBtn.addEventListener('click', nextSlide);
prevBtn.addEventListener('click', prevSlide);
function nextSlide() {
updateSlide(+1);
updateText(+1);
updateLink(+1);
clearInterval(myInterval);
}
function prevSlide() {
updateSlide(-1);
updateText(-1);
updateLink(-1);
clearInterval();
clearInterval(myInterval);
}
var myInterval = window.setInterval(function(){
updateSlide(+1),updateText(+1),updateLink(+1); },
8000);
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: lightblue;
}
.images {
background-color: #4047c9;
flex: 0 0 80%;
min-height: 70vh;
border-radius: 10px;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
color: white;
}
#links {
text-decoration: none;
color: white;
border: solid 2px white;
border-radius: 3px;
padding: 5px 10px;
}
#links:hover {
background-color: #000238;
}
a {
color: white;
text-decoration: none;
}
.dots {
display: flex;
margin-top: 120px;
margin-bottom: 50px;
}
#dot1, #dot2, #dot3 {
width: 20px;
height: 20px;
background-color: rgb(147, 151, 249);
border-radius: 50%;
margin: 0px 5px;
cursor: pointer;
}
#dot1:active, #dot2:active, #dot3:active {
background-color: #fff;
}
.btn {
display: inline-block;
background: white;
color: black;
padding: 10px;
border: none;
cursor: pointer;
}
.prevBtn {
position: absolute;
top: 50%;
left: 0;
transform: translate(-50%, -50%);
}
.nextBtn {
position: absolute;
top: 50%;
right: 0;
transform: translate(50%, -50%);
}
.btn:active {
background-color: grey;
color: white;
}
.btn:hover {
background-color: grey;
color: white;
}
<body>
<div class="images">
<button type="button" class="btn prevBtn">Prev Btn</button>
<button type="button" class="btn nextBtn">Next Btn</button>
<h1 id="offers">Changing text</h1>
<a href="#" id="links">Links</a>
<div class="dots">
<span id="dot1"></span>
<span id="dot2"></span>
<span id="dot3"></span>
</div>
</div>
</body>
解决方案
首先,根据
https://developer.mozilla.org/en-US/docs/Web/CSS/:active
:active CSS 伪类表示用户正在激活的元素(例如按钮)。
因此,如果您希望您的点处于活动状态,则必须编写一种不同的方式来赋予它们活动状态,因为它们当前是<span>
标签,我建议给它们一个类.active
,并添加 Javascript 代码以添加该类给他们,或者在 Javascript 函数中以编程方式添加该样式。
但是,根据您的其他要求,您很可能还必须将这些点设置为<a>
标签或类似的东西,以便您可以向它们添加功能,让单击这些点将您带到任何幻灯片。大概是这样的:
function dot1Click() {
updateSlide(1);
updateText(1);
updateLink(1);
dot1.style.backgroundColor = #fff;
}
那么你应该有一些你想要的东西。当我有更多时间整理代码片段时,我会回到这个问题,但我想给你一些东西来帮助你开始!
推荐阅读
- sql-server - Web 服务无法访问,但 Tomcat 仍然“已启动”
- single-sign-on - 有没有办法将 Nifi Server 与 AWS Cognito 集成?
- amazon-web-services - AWS:Web 服务器:使用 Docker 还是在 EC2 实例上配置服务器更好
- java - 如何在 GLSurfaceView 上的一行上方添加文本标签
- angular - 使用量角器时 element(by.id('username')) 和 browser.driver.findElement(by.id('username')) 有什么区别
- android - TextView 的文字没有变化
- c# - IValueConverter 计算 TextBlock 的新大小
- javascript - 使用动画时,clearInterval 不会停止触发事件,或者第二个动画不会运行
- python - 如何在python中将语音与列表进行比较
- ios - 我可以在 iOS 应用程序中收集捐赠信息,然后重定向到 safari