當幻燈片處于活動狀態時，改變標簽的顏色 -有解無憂

有人能幫助我嗎？我想改變活動幻燈片文本的顏色。

因此，如果幻燈片1是活動的，那么螢屏底部的文本 "幻燈片1 "應該變成黃色，其他兩個保持白色。

如果第2張幻燈片處于活動狀態，"第2張幻燈片 "應該變成黃色。

我使用的代碼是："https://codepen.io/omairatiq/pen/wvBoGaE"

$(document)。 ready(function() {
    

    $(".slider"/span>).slick({
    infinite: true,
    arrows: false,
    dots: false,
    autoplay: false,
    speed: 800,
    slidesToShow: 1,
    slidesToScroll: 1,
    });

    /ticking machine: 1.
    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（進度）。
    });

    function startProgressbar（） {
        resetProgressbar（）。
        percentTime = 0;
        tick = setInterval（interval, 10）。
    }

    function interval（） {
        if (($('.slider .slick-track div[data-slick-index="'   progressBarIndex   '" ] '). attr("ria-hidden")) === "true") {
            progressBarIndex = $('.slider .slick-track div[ria-hidden="false"]').data("slickIndex") 。
            startProgressbar（）。
        } else {
            percentTime  = 1 /（time   5）。
            $('.inProgress'   progressBarIndex).css({
                width: percentTime   "%"/span>
            });
            if ( percentTime >= 100) {
                $('.single-item').slick('slickNext')。
                progressBarIndex  ;
                if (progressBarIndex > 2) {
                    progressBarIndex = 0;
                }
                startProgressbar（）。
            }
        }
    }

    function resetProgressbar（） {
        $('.inProgress'/span>).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;
  字體大小。30px;
  font-family: "Arial"/span>, "Helvetica"/span>;
  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: 指標。
  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>/span>
<link href="https://cdnjs.cloudflare. com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="styleheet"/>
<body> 
<div class="sliderContainer"> 
  <div class="slider single-item"/span>>
    <div>Slide1</div> 
    <div>Slide2</div> 
    <div>Slide3</div> 
  </div>/span>
  <div class="progressBarContainer">/span>
    <div>/span>
      <h3>幻燈片 1</h3>
      < span data-slick-index="0" class="progressBar" > </span>>
    </div>/span>
    <div>/span>
      <h3>幻燈片 2</h3>
      < span data-slick-index="1" class="progressBar" > </span>>
    </div>/span>
    <div>/span>
      <h3>幻燈片 3</h3>
      < span data-slick-index="2" class="progressBar" > </span>>
    </div>/span>
  </div>/span>
</div>/span>
</body>/span>

很抱歉我的英文不好。

uj5u.com熱心網友回復：

你可以用這種方式來定制這個腳本。在js檔案的函式Interval()中，在這一行上面

$('.inProgress'   progressBarIndex).css({
    width: percentTime   "%"/span>
});

添加這部分內容

$('.inProgress'/span>).parent(). parent().removeClass("yellow-text") 。
$('.inProgress'   progressBarIndex).parent()。 parent().addClass（"yellow-text"）。

然后在css檔案中添加這一行

.yellow-text h3{
  顏色：黃色。
}

最后，Full Interval函式是

。

function interval（） {
    if (($('.slider .slick-track div[data-slick-index="'   progressBarIndex   '" ] '). attr("ria-hidden")) === "true") {
        progressBarIndex = $('.slider .slick-track div[ria-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   "%"/span>
        });
        if ( percentTime >= 100) {
            $('.single-item').slick('slickNext')。
            progressBarIndex  ;
            if (progressBarIndex > 2) {
                progressBarIndex = 0;
            }
            startProgressbar（）。
        }
    }

在此詳細檢查 https://codepen.io/jamesjo29155352/pen/NWjOrrx

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/319913.html

標籤：

上一篇：如何在js中創建2個按鈕播放，暫停

下一篇：在一個頁面上激活多個功能模式