如何在 html 中单击（或活动）时将背景图像添加到幻灯片中的导航项目符号

Question

我创建了一个带有自定义导航项目符号的幻灯片。每个项目符号都有自己的自定义圆形 images.Now 问题是我有每个项目符号的背景图像，它应该在项目符号被单击或激活时出现。

我尝试添加使用 .active css 功能来更改背景图片，但它不起作用。

CSS

.bulletOne:active {
background-image: url("http://localhost/wordpress/wp-content/uploads/2020/06/CallOfDuty_2.png");
}

下面添加了我的完整 HTML 代码，供您参考 css、html 和 js 请帮我。提前谢谢你

除了图像 link 其他一切正常你可以通过替换 w3schools 中的那些 link 来测试它试试平台

完整代码

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */


/* The dots/bullets/indicators */
.dotOne {
  cursor: pointer;
  height: 75px;
  width: 75px;
   padding: 8px 40px 20px;
  margin: 0 2px;
   background-image: url("http://localhost/wordpress/wp-content/uploads/2020/06/Cyberpunk-2077.png");
   border-radius: 50%;
  display: inline-block;
   transition:background-color :#ffffff; 
}
.dotTwo {
  cursor: pointer;
  height: 75px;
  width: 75px;
   padding: 8px 40px 20px;
  margin: 0 2px;
   background-image: url("http://localhost/wordpress/wp-content/uploads/2020/06/Sales_Icon_Cropped.png");
   border-radius: 50%;
  display: inline-block;
   transition:background-color :#ffffff; 
}
.dotThree {
  cursor: pointer;
  height: 75px;
  width: 75px;
   padding: 8px 40px 20px;
  margin: 0 2px;
   background-image: url("http://localhost/wordpress/wp-content/uploads/2020/06/CallOfDuty_2.png");
   border-radius: 50%;
  display: inline-block;
   transition:background-color :#ffffff; 
}
.dotFour {
  cursor: pointer;
  height: 75px;
  width: 75px;
   padding: 8px 40px 20px;
  margin: 0 2px;
   background-image: url("http://localhost/wordpress/wp-content/uploads/2020/06/Age-of-Empires-IV.png");
   border-radius: 50%;
  display: inline-block;
   transition:background-color :#ffffff; 
}

.dotFour:active {
  background-image: url("http://localhost/wordpress/wp-content/uploads/2020/06/CallOfDuty_2.png");
}


/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}
</style>
</head>
<body>
<div style="text-align:center">
  <span class="dotOne" onclick="currentSlide(1)"></span> 
  <span class="dotTwo" onclick="currentSlide(2)"></span> 
  <span class="dotThree" onclick="currentSlide(3)"></span> 
  <span class="dotFour" onclick="currentSlide(4)"></span> 
</div>

<div class="slideshow-container">

<div class="mySlides fade">

  <img src="http://localhost/wordpress/wp-content/uploads/2020/06/HellBlade_2.png" style="width:100%">

</div>

<div class="mySlides fade">

  <img src="http://localhost/wordpress/wp-content/uploads/2020/06/CallOfDuty_WarZone_PC.png" style="width:100%">

</div>

<div class="mySlides fade">

  <img src="http://localhost/wordpress/wp-content/uploads/2020/06/CallOfDuty_2.png" style="width:100%">

</div>

<div class="mySlides fade">

  <img src="http://localhost/wordpress/wp-content/uploads/2020/06/Age-of-Empires-IV.png" style="width:100%">

</div>

<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>
<br>



<script>
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var dots;
  var slides = document.getElementsByClassName("mySlides");
  if(n==1){
  dots = document.getElementsByClassName("dotOne");
  }else if(n==2){
  dots = document.getElementsByClassName("dotTwo");
  }else if(n==3){
  dots = document.getElementsByClassName("dotThree");
  }else if(n==4){
  dots = document.getElementsByClassName("dotFour");
  }

  if (n > slides.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
}
</script>

</body>
</html>

Answer 1

有一些问题。

在脚本中，var dots 应该是一个数组。我将 class dots 添加到 html 中的点元素，并在脚本中进行了所需的调整。

var dots = document.getElementsByClassName("dots");

在 css 中，您使用的是 dots:active，但我不确定这是您在这里想要的。
- 使用 :active selector 表示单击项目符号时发生的事件。
- 使用像 .active 这样的自定义 class 来设置与当前显示的图像相对应的项目符号样式。

这是编辑后的片段。我包括了 :active、.active 和 :hover 的可能性。只需将样式更改为您想要的样式即可。

:focus 不适用于此处。您不能将焦点应用于所有 HTML 元素。如果您想了解更多，请阅读 this。

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var dots = document.getElementsByClassName("dots");
  var slides = document.getElementsByClassName("mySlides");


  if (n > slides.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = slides.length
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " active";
}

function goToSlideshow(){
  var slideshow = document.getElementsByClassName("slideshow-container");
  slideshow[0].scrollIntoView({ behavior: 'smooth' });
}

* {
  box-sizing: border-box
}

body {
  font-family: Verdana, sans-serif;
  margin: 0
}

.mySlides {
  display: none
}

img {
  vertical-align: middle;
}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */


/* The dots/bullets/indicators */
.dotOne {
  cursor: pointer;
  height: 75px;
  width: 75px;
  padding: 8px 40px 20px;
  margin: 0 2px;
  background-image: url("https://images.unsplash.com/photo-1514530963096-e9aa1f285eb5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80");
  border-radius: 50%;
  display: inline-block;
  transition: background-color:#ffffff;
}

.dotTwo {
  cursor: pointer;
  height: 75px;
  width: 75px;
  padding: 8px 40px 20px;
  margin: 0 2px;
  background-image: url("https://images.unsplash.com/photo-1484447089447-a742155835e2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80");
  border-radius: 50%;
  display: inline-block;
  transition: background-color:#ffffff;
}

.dotThree {
  cursor: pointer;
  height: 75px;
  width: 75px;
  padding: 8px 40px 20px;
  margin: 0 2px;
  background-image: url("https://images.unsplash.com/photo-1504909297680-b34eb832a31f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80");
  border-radius: 50%;
  display: inline-block;
  transition: background-color:#ffffff;
}

.dotFour {
  cursor: pointer;
  height: 75px;
  width: 75px;
  padding: 8px 40px 20px;
  margin: 0 2px;
  background-image: url("https://images.unsplash.com/photo-1445023835378-9fa9a2089f0c?ixlib=rb-1.2.1&auto=format&fit=crop&w=667&q=80");
  border-radius: 50%;
  display: inline-block;
  transition: background-color:#ffffff;
}

.dots:hover{
  background: lightgreen;
}

.dots:active {
  background: red;
}

.dots.active {
  border: 2px solid red;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {
    opacity: .4
  }

  to {
    opacity: 1
  }
}

@keyframes fade {
  from {
    opacity: .4
  }

  to {
    opacity: 1
  }
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {

  .prev,
  .next,
  .text {
    font-size: 11px
  }
}

<body>
  <div style="text-align:center">
    <span class="dots dotOne" onclick="currentSlide(1); goToSlideshow();"></span>
    <span class="dots dotTwo" onclick="currentSlide(2); goToSlideshow();"></span>
    <span class="dots dotThree" onclick="currentSlide(3); goToSlideshow();"></span>
    <span class="dots dotFour" onclick="currentSlide(4); goToSlideshow();"></span>
  </div>

  <div class="slideshow-container">

    <div class="mySlides fade">

      <img src="https://images.unsplash.com/photo-1514530963096-e9aa1f285eb5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" style="width:100%">

    </div>

    <div class="mySlides fade">

      <img src="https://images.unsplash.com/photo-1484447089447-a742155835e2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" style="width:100%">

    </div>

    <div class="mySlides fade">

      <img src="https://images.unsplash.com/photo-1504909297680-b34eb832a31f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" style="width:100%">

    </div>

    <div class="mySlides fade">

      <img src="https://images.unsplash.com/photo-1445023835378-9fa9a2089f0c?ixlib=rb-1.2.1&auto=format&fit=crop&w=667&q=80" style="width:100%">

    </div>

    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

  </div>
  <br>


</body>

如何在 html 中单击（或活动）时将背景图像添加到幻灯片中的导航项目符号

How to add background images to navigation bullets in slideshow when it is clicked (or active) in html

html

javascript

css

custom-wordpress-pages

CSS

完整代码