gpt4 book ai didi

html - 轮播指示器激活

转载 作者:行者123 更新时间:2023-12-05 06:57:13 26 4
gpt4 key购买 nike

我正在尝试在幻灯片处于事件状态时更改指示器颜色。因此,当您单击指示器时,幻灯片会发生变化,但指示器不会改变颜色。我只将 .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%;
}

最佳答案

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

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>

关于html - 轮播指示器激活,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64941892/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com