更改輪播上div的背景顏色-有解無憂

我正在嘗試使用 javascript，并遵循了一個簡單影像滑塊的教程。我正在嘗試添加它并讓背景隨著幻燈片的移動而淡化為不同的顏色。我已經設法用左右箭頭弄清楚了（不確定最佳實踐），但在選擇指標時我似乎無法正確理解。任何人都可以就解決方案提出建議嗎？

提前致謝。

const left = document.querySelector('.left');
const right = document.querySelector('.right');

const slider = document.querySelector('.carousel__slider');

const indicatorParent = document.querySelector('.carousel__controls ol'); 
const indicators = document.querySelectorAll('.carousel__controls li');

index = 0;

var background = 1;

function indicatorBg(val){
    var background = val;
    changeBg();
}

indicators.forEach((indicator, i) => {
  indicator.addEventListener('click', () => {
    document.querySelector('.carousel__controls .selected').classList.remove('selected');
    indicator.classList.add('selected');
    slider.style.transform = 'translateX('   (i) * -25   '%)';  
    index = i;
  });
});

left.addEventListener('click', function() {
  index = (index > 0) ? index -1 : 0;
  document.querySelector('.carousel__controls .selected').classList.remove('selected');
  indicatorParent.children[index].classList.add('selected');
  slider.style.transform = 'translateX('   (index) * -25   '%)';
    if (background <= 1) {
      return false;
    } else {
        background--;
    } 
    changeBg();
});

right.addEventListener('click', function() {
  index = (index < 4 - 1) ? index 1 : 3;
  document.querySelector('.carousel__controls .selected').classList.remove('selected');
  indicatorParent.children[index].classList.add('selected');
  slider.style.transform = 'translateX('   (index) * -25   '%)';
    if (background >= 4) {
      return false;
    } else {
        background  ;
    } 
    changeBg();
});

function changeBg (){
    if (background == 1) {
        document.getElementById("carousel__track").className = 'slide-1'; 
    } else if (background == 2) {
        document.getElementById("carousel__track").className = 'slide-2';
    } else if (background == 3) {
        document.getElementById("carousel__track").className = 'slide-3';
    } else if (background == 4) {
        document.getElementById("carousel__track").className = 'slide-4';
    }
}

window.onload = changeBg;

.carousel {
    height: 80vh;
    width: 100%;
    margin: 0 auto;
}
#carousel__track {
    height: 100%;
    position: relative;
    overflow: hidden;
}
.background {
    background: red;
}
.carousel__slider {
    height: 100%;
    display: flex;
    width: 400%;
    transition: all 0.3s;
}
.carousel__slider div {
    flex-basis: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.carousel__controls .carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 8888
}
.carousel__controls .carousel__arrow i {
    font-size: 2.6rem;
}
.carousel__arrow.left {
    left: 1em;
}
.carousel__arrow.right {
    right: 1em;
}
.carousel__controls ol {
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}
.carousel__controls ol li {
    width: 14px;
    height: 14px;
    border-radius: 50px;
    margin: .5em;
    padding: 0;
    background: white;
    transform: scale(.6);
    cursor: pointer;
}
.carousel__controls ol li.selected {
    background: black;
    transform: scale(1);
    transition: all .2s;
    transition-delay: .3s;
}
.slide-1 {
    background: pink;
    transition: all 0.4s;
}
.slide-2 {
    background: coral;
    transition: all 0.4s;
}
.slide-3 {
    background: green;
    transition: all 0.4s;
}
.slide-4 {
    background: orange;
    transition: all 0.4s;
}

<section class="carousel">
      <div id="carousel__track">
            <div class="carousel__slider">
                <div>Slide 1</div>
                <div>Slide 2</div>
                <div>Slide 3</div>
                <div>Slide 4</div>
            </div>
            <div id="left" class="carousel__controls"><span class="carousel__arrow left"><</span> <span id="right" class="carousel__arrow right">></span>
              <ol>
                <li value="1" onclick="indicatorBg(this.value)" class="selected"></li>
                    <li value="2" onclick="indicatorBg(this.value)"></li>
                    <li value="3" onclick="indicatorBg(this.value)"></li>
                    <li value="4" onclick="indicatorBg(this.value)"></li>
                </ol>
            </div>
        </div>
    </section>

uj5u.com熱心網友回復：

您忘記更改指標的單擊事件處理程式內的背景。

indicators.forEach((indicator, i) => {
  indicator.addEventListener('click', () => {
    document.querySelector('.carousel__controls .selected').classList.remove('selected');
    indicator.classList.add('selected');
    slider.style.transform = 'translateX('   (i) * -25   '%)';  
    index = i;

    background = index   1;
    changeBg();
  });
});

就最佳實踐而言，我通常使用 CSS 的類名和 JavaScript 的 ID。就我個人而言，我不建議您在此階段擔心最佳實踐，而是專注于讓代碼正常作業并逐行了解正在發生的事情。

uj5u.com熱心網友回復：

有很多解決方案，但我建議的最簡單的解決方案是使用奇數和偶數來設定輪播中 div 的樣式（這意味著例如第一個是綠色第二個是橙色第三個是綠色等等......

.carousel__slider div:nth-child(2n) /*Selects even numbered elements*/
.carousel__slider div:nth-child(2n 1) /*Selects odd numbered elements*/

查看代碼片段

const left = document.querySelector('.left');
const right = document.querySelector('.right');

const slider = document.querySelector('.carousel__slider');

const indicatorParent = document.querySelector('.carousel__controls ol'); 
const indicators = document.querySelectorAll('.carousel__controls li');

index = 0;

//var background = 1;

//function indicatorBg(val){
//    var background = val;
//    changeBg();
//}

indicators.forEach((indicator, i) => {
  indicator.addEventListener('click', () => {
    document.querySelector('.carousel__controls .selected').classList.remove('selected');
    indicator.classList.add('selected');
    slider.style.transform = 'translateX('   (i) * -25   '%)';  
    index = i;
  });
});

left.addEventListener('click', function() {
  index = (index > 0) ? index -1 : 0;
  document.querySelector('.carousel__controls .selected').classList.remove('selected');
  indicatorParent.children[index].classList.add('selected');
  slider.style.transform = 'translateX('   (index) * -25   '%)';
//    if (background <= 1) {
//      return false;
//    } else {
//        background--;
//    } 
//    changeBg();
});

right.addEventListener('click', function() {
  index = (index < 4 - 1) ? index 1 : 3;
  document.querySelector('.carousel__controls .selected').classList.remove('selected');
  indicatorParent.children[index].classList.add('selected');
  slider.style.transform = 'translateX('   (index) * -25   '%)';
//    if (background >= 4) {
//      return false;
//    } else {
//        background  ;
//    } 
//    changeBg();
});

//function changeBg (){
//    if (background == 1) {
//        document.getElementById("carousel__track").className = 'slide-1'; 
//    } else if (background == 2) {
//        document.getElementById("carousel__track").className = 'slide-2';
//    } else if (background == 3) {
//        document.getElementById("carousel__track").className = 'slide-3';
//    } else if (background == 4) {
//        document.getElementById("carousel__track").className = 'slide-4';
//    }
//}

//window.onload = changeBg;

.carousel {
    height: 80vh;
    width: 100%;
    margin: 0 auto;
}
#carousel__track {
    height: 100%;
    position: relative;
    overflow: hidden;
}
.background {
    background: red;
}
.carousel__slider {
    height: 100%;
    display: flex;
    width: 400%;
    transition: all 0.3s;
}
.carousel__slider div {
    flex-basis: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.carousel__controls .carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 8888
}
.carousel__controls .carousel__arrow i {
    font-size: 2.6rem;
}
.carousel__arrow.left {
    left: 1em;
}
.carousel__arrow.right {
    right: 1em;
}
.carousel__controls ol {
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}
.carousel__controls ol li {
    width: 14px;
    height: 14px;
    border-radius: 50px;
    margin: .5em;
    padding: 0;
    background: white;
    transform: scale(.6);
    cursor: pointer;
}
.carousel__controls ol li.selected {
    background: black;
    transform: scale(1);
    transition: all .2s;
    transition-delay: .3s;
}
/*.slide-1 {
    background: pink;
    transition: all 0.4s;
}
.slide-2 {
    background: coral;
    transition: all 0.4s;
}
.slide-3 {
    background: green;
    transition: all 0.4s;
}
.slide-4 {
    background: orange;
    transition: all 0.4s;
}*/
.carousel__slider div:nth-child(2n) {
  background-color:orange;
}
.carousel__slider div:nth-child(2n 1) {
  background-color:green;
}

<section class="carousel">
      <div id="carousel__track">
            <div class="carousel__slider">
                <div>Slide 1</div>
                <div>Slide 2</div>
                <div>Slide 3</div>
                <div>Slide 4</div>
            </div>
            <div id="left" class="carousel__controls"><span class="carousel__arrow left"><</span> <span id="right" class="carousel__arrow right">></span>
              <ol>
                <li value="1"  class="selected"></li>
                    <li value="2" ></li>
                    <li value="3" ></li>
                    <li value="4" ></li>
                </ol>
            </div>
        </div>
    </section>

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

標籤：javascript html css

上一篇：重置進度/計時器欄

下一篇：InnerHTML不顯示字串中的內容