html - 轮播指示器激活

Question

我正在尝试在幻灯片处于事件状态时更改指示器颜色。 因此，当您单击指示器时，幻灯片会发生变化，但指示器不会改变颜色。 我只将 .bar:hover 的边框颜色设置为白色。我也试过 :active :checked 但没有任何效果...... 但我不知道该怎么做。

轮播 HTML:

<div class="slidershow center">

        <div class="slides">
            <input type="radio" name="r" id="r1" checked>
            <input type="radio" name="r" id="r2">
            <input type="radio" name="r" id="r3">
            <input type="radio" name="r" id="r4">
            <input type="radio" name="r" id="r5">
            <input type="radio" name="r" id="r6">
            <input type="radio" name="r" id="r7">

            <div class="slida s1 img-magnifier-container">
                <img id="myimage" src="carousel/01.png">
            </div>

            <div class="slida img-magnifier-container">
                <img id="myimage2" src="carousel/02.png" alt="">
            </div>

            <div class="slida img-magnifier-container">
                <img id="myimage3" src="carousel/03.png" alt="">
            </div>

            <div class="slida img-magnifier-container">
                <img id="myimage4" src="carousel/04.png" alt="">
            </div>

            <div class="slida img-magnifier-container">
                <img id="myimage5" src="carousel/05.png" alt="">
            </div>

            <div class="slida img-magnifier-container">
                <img id="myimage6" src="carousel/06.png" alt="">
            </div>

            <div class="slida img-magnifier-container">
                <img id="myimage7" src="carousel/07.png" alt="">
            </div>
        </div>

        <div class="navigation">
            <label for="r1" class="bar"></label>
            <label for="r2" class="bar"></label>
            <label for="r3" class="bar"></label>
            <label for="r4" class="bar"></label>
            <label for="r5" class="bar"></label>
            <label for="r6" class="bar"></label>
            <label for="r7" class="bar"></label>
        </div>
    </div>

轮播 CSS:

    .slidershow {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.center {
    transform: translate (-50% , -50%);
}

.navigation {
    position: relative;
    bottom: 0;
    left: 32%;
    transform: translateX (-50%);
    display: flex;
    z-index: 999;
}

@media screen and (max-width: 768px) {
    .slidershow {
        display: none;
    }
}

.bar {
    width: 50px;
    height: 1px;
    border: 2px solid grey;
    margin: 6px;
    cursor: pointer;
    transition: 0.4s;
}

.bar:hover {
    border-color: white;
}


input[name="r"]{
    position: absolute;
    visibility: hidden;
}

.slides {
    width: 1000%;
    height: 100%;
    display: flex;
}

.slida {
    width: 10%;
    transition: 0.6s;
}

.slida img {
    width: 100%;
    height: 100%;
}


#r1:checked ~ .s1 {
    margin-left: 0;
}

#r2:checked ~ .s1 {
    margin-left: -10%;
}

#r3:checked ~ .s1 {
    margin-left: -20%;
}

#r4:checked ~ .s1 {
    margin-left: -30%;
}

#r5:checked ~ .s1 {
    margin-left: -40%;
}

 #r6:checked ~ .s1 {
    margin-left: -50%;
} 

#r7:checked ~ .s1 {
    margin-left: -60%;
}  

.carousel img {
    width: 100%;
}

Answer 1

希望我理解正确。只需添加此脚本:

let bar = document.querySelectorAll('.bar');

let select_bar = (event) => {
  [...bar].forEach(link => link.classList.remove('active_bar'));
  event.target.classList.add('active_bar');
}

[...bar].forEach(e => e.addEventListener('click', select_bar));

并将此选择器添加到您的 css(您可以为事件栏制定自己的样式规则):

.active_bar {
    border: 2px solid red;
    background-color: red;
}

有必要吗？

let bar = document.querySelectorAll('.bar');

let select_bar = (event) => {
  [...bar].forEach(link => link.classList.remove('active_bar'));
  event.target.classList.add('active_bar');
}

[...bar].forEach(e => e.addEventListener('click', select_bar));

.slidershow {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.center {
    transform: translate (-50% , -50%);
}

.navigation {
    position: relative;
    bottom: 0;
    left: 32%;
    transform: translateX (-50%);
    display: flex;
    z-index: 999;
}

@media screen and (max-width: 768px) {
    .slidershow {
        display: none;
    }
}

.bar {
    width: 50px;
    height: 1px;
    border: 2px solid grey;
    margin: 6px;
    cursor: pointer;
    transition: 0.4s;
}

.active_bar {
    border: 2px solid red;
    background-color: red;
}

.bar:hover {
    border-color: white;
}


input[name="r"]{
    position: absolute;
    visibility: hidden;
}

.slides {
    width: 1000%;
    height: 100%;
    display: flex;
}

.slida {
    width: 10%;
    transition: 0.6s;
}

.slida img {
    width: 100%;
    height: 100%;
}


#r1:checked ~ .s1 {
    margin-left: 0;
}

#r2:checked ~ .s1 {
    margin-left: -10%;
}

#r3:checked ~ .s1 {
    margin-left: -20%;
}

#r4:checked ~ .s1 {
    margin-left: -30%;
}

#r5:checked ~ .s1 {
    margin-left: -40%;
}

 #r6:checked ~ .s1 {
    margin-left: -50%;
} 

#r7:checked ~ .s1 {
    margin-left: -60%;
}  

.carousel img {
    width: 100%;
}

<div class="slidershow center">

        <div class="slides">
            <input type="radio" name="r" id="r1" checked>
            <input type="radio" name="r" id="r2">
            <input type="radio" name="r" id="r3">
            <input type="radio" name="r" id="r4">
            <input type="radio" name="r" id="r5">
            <input type="radio" name="r" id="r6">
            <input type="radio" name="r" id="r7">

            <div class="slida s1 img-magnifier-container">
                <img id="myimage" src="https://sun9-69.userapi.com/impf/c824201/v824201969/17341f/IfCwbiGRL7c.jpg?size=200x0&quality=90&crop=0,0,500,588&sign=9b4d43be2be378401d5bec41a9c5d5b3&ava=1">
            </div>

            <div class="slida img-magnifier-container">
                <img id="myimage2" src="https://sun9-69.userapi.com/impf/c824201/v824201969/17341f/IfCwbiGRL7c.jpg?size=200x0&quality=90&crop=0,0,500,588&sign=9b4d43be2be378401d5bec41a9c5d5b3&ava=1" alt="">
            </div>

            <div class="slida img-magnifier-container">
                <img id="myimage3" src="https://sun9-69.userapi.com/impf/c824201/v824201969/17341f/IfCwbiGRL7c.jpg?size=200x0&quality=90&crop=0,0,500,588&sign=9b4d43be2be378401d5bec41a9c5d5b3&ava=1" alt="">
            </div>

            <div class="slida img-magnifier-container">
                <img id="myimage4" src="https://sun9-69.userapi.com/impf/c824201/v824201969/17341f/IfCwbiGRL7c.jpg?size=200x0&quality=90&crop=0,0,500,588&sign=9b4d43be2be378401d5bec41a9c5d5b3&ava=1" alt="">
            </div>

            <div class="slida img-magnifier-container">
                <img id="myimage5" src="https://sun9-69.userapi.com/impf/c824201/v824201969/17341f/IfCwbiGRL7c.jpg?size=200x0&quality=90&crop=0,0,500,588&sign=9b4d43be2be378401d5bec41a9c5d5b3&ava=1" alt="">
            </div>

            <div class="slida img-magnifier-container">
                <img id="myimage6" src="https://sun9-69.userapi.com/impf/c824201/v824201969/17341f/IfCwbiGRL7c.jpg?size=200x0&quality=90&crop=0,0,500,588&sign=9b4d43be2be378401d5bec41a9c5d5b3&ava=1" alt="">
            </div>

            <div class="slida img-magnifier-container">
                <img id="myimage7" src="https://sun9-69.userapi.com/impf/c824201/v824201969/17341f/IfCwbiGRL7c.jpg?size=200x0&quality=90&crop=0,0,500,588&sign=9b4d43be2be378401d5bec41a9c5d5b3&ava=1" alt="">
            </div>
        </div>

        <div class="navigation">
            <label for="r1" class="bar"></label>
            <label for="r2" class="bar"></label>
            <label for="r3" class="bar"></label>
            <label for="r4" class="bar"></label>
            <label for="r5" class="bar"></label>
            <label for="r6" class="bar"></label>
            <label for="r7" class="bar"></label>
        </div>
    </div>