幻灯片处于活动状态时更改标签的颜色
Posted
技术标签:
【中文标题】幻灯片处于活动状态时更改标签的颜色【英文标题】：Change color of label when slide is active 【发布时间】：2021-10-10 18:39:04 【问题描述】：有人可以帮助我吗 我正在尝试更改文本活动幻灯片的颜色。
因此，如果幻灯片 1 处于活动状态，则屏幕底部的“幻灯片 1”文本应变为黄色，而其他 2 则保持白色。
如果幻灯片 2 处于活动状态，“幻灯片 2”应该变成黄色 enz。
我使用的代码是：“https://codepen.io/omairatiq/pen/wvBoGaE”
$(document).ready(function()
$(".slider").slick(
infinite: true,
arrows: false,
dots: false,
autoplay: false,
speed: 800,
slidesToShow: 1,
slidesToScroll: 1,
);
//ticking machine
var percentTime;
var tick;
var time = 1;
var progressBarIndex = 0;
$('.progressBarContainer .progressBar').each(function(index)
var progress = "<div class='inProgress inProgress" + index + "'></div>";
$(this).html(progress);
);
function startProgressbar()
resetProgressbar();
percentTime = 0;
tick = setInterval(interval, 10);
function interval()
if (($('.slider .slick-track div[data-slick-index="' + progressBarIndex + '"]').attr("aria-hidden")) === "true")
progressBarIndex = $('.slider .slick-track div[aria-hidden="false"]').data("slickIndex");
startProgressbar();
else
percentTime += 1 / (time + 5);
$('.inProgress' + progressBarIndex).css(
width: percentTime + "%"
);
if (percentTime >= 100)
$('.single-item').slick('slickNext');
progressBarIndex++;
if (progressBarIndex > 2)
progressBarIndex = 0;
startProgressbar();
function resetProgressbar()
$('.inProgress').css(
width: 0 + '%'
);
clearInterval(tick);
startProgressbar();
// End ticking machine
$('.progressBarContainer div').click(function ()
clearInterval(tick);
var goToThisIndex = $(this).find("span").data("slickIndex");
$('.single-item').slick('slickGoTo', goToThisIndex, false);
startProgressbar();
);
);h3
margin:5px 0;
color: black;
.sliderContainer
position: relative;
.slider
width: 500px;
margin: 30px 50px 50px;
.slick-slide
background: #3a8999;
color: white;
padding: 80px 0 120px;
font-size: 30px;
font-family: "Arial", "Helvetica";
text-align: center;
.slick-prev:before,
.slick-next:before
color: black;
.slick-dots
bottom: -30px;
.slick-slide:nth-child(odd)
background: #e84a69;
.progressBarContainer
position: absolute;
bottom: 20px;
width:300px;
left:150px;
.progressBarContainer div
display: block;
width: 30%;
padding: 0;
cursor: pointer;
margin-right: 5%;
float: left;
color: white;
.progressBarContainer div:last-child
margin-right: 0;
.progressBarContainer div span.progressBar
width: 100%;
height: 4px;
background-color: rgba(255, 255, 255, 0.4);
display: block;
.progressBarContainer div span.progressBar .inProgress
background-color: rgba(255, 255, 255, 1);
width: 0%;
height: 4px;
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<body>
<div class="sliderContainer">
<div class="slider single-item">
<div>Slide1</div>
<div>Slide2</div>
<div>Slide3</div>
</div>
<div class="progressBarContainer">
<div>
<h3>Slide 1</h3>
<span data-slick-index="0" class="progressBar"></span>
</div>
<div>
<h3>Slide 2</h3>
<span data-slick-index="1" class="progressBar"></span>
</div>
<div>
<h3>Slide 3</h3>
<span data-slick-index="2" class="progressBar"></span>
</div>
</div>
</div>
</body>对不起，我的英语不好。
【问题讨论】：
我看不到.slick() 的定义位置。
我是网络开发新手，不知道该怎么做
【参考方案1】：
您可以通过这种方式自定义此脚本。 在 js 文件中的函数 Interval() 中，在这一行上方
$('.inProgress' + progressBarIndex).css(
width: percentTime + "%"
);
添加这部分
$('.inProgress').parent().parent().removeClass("yellow-text");
$('.inProgress' + progressBarIndex).parent().parent().addClass("yellow-text");
并在css文件中添加这一行
.yellow-text h3
color :yellow;
最后，全区间函数是
function interval()
if (($('.slider .slick-track div[data-slick-index="' + progressBarIndex + '"]').attr("aria-hidden")) === "true")
progressBarIndex = $('.slider .slick-track div[aria-hidden="false"]').data("slickIndex");
startProgressbar();
else
percentTime += 1 / (time + 5);
$('.inProgress').parent().parent().removeClass("yellow-text");
$('.inProgress' + progressBarIndex).parent().parent().addClass("yellow-text");
$('.inProgress' + progressBarIndex).css(
width: percentTime + "%"
);
if (percentTime >= 100)
$('.single-item').slick('slickNext');
progressBarIndex++;
if (progressBarIndex > 2)
progressBarIndex = 0;
startProgressbar();
详细查看这里 https://codepen.io/jamesjo29155352/pen/NWjOrrx
【讨论】：
以上是关于幻灯片处于活动状态时更改标签的颜色的主要内容，如果未能解决你的问题，请参考以下文章
选项卡处于非活动状态时，jQuery setInterval太快