मैं एक स्वचालित स्लाइड शो प्रदर्शित करने का प्रयास करता हूं। चित्र बदल रहे हैं लेकिन नीचे दिए गए बिंदु काम नहीं कर रहे हैं। जब मैं किसी भी बिंदु पर क्लिक करता हूं, तो यह काम करता है, लेकिन मैं चाहता हूं कि प्रत्येक बिंदु स्लाइड बदलने के साथ-साथ सफेद हो जाए।

यहां एचटीएमएल फाइल है:

<div class="slideshow-container">
            <div class="mySlides fade">
                <img src="images/laptop.png" class="welcome__img" style="width:100%">
            </div>
            <div class="mySlides fade">
                <img src="images/laptop.png" class="welcome__img" style="width:100%">
            </div>
            <div class="mySlides fade">
                <img src="images/laptop.png" class="welcome__img" style="width:100%">
            </div>
            <div style="text-align:center">
                <span class="dot" onclick="currentSlide(1)"></span>
                <span class="dot" onclick="currentSlide(2)"></span>
                <span class="dot" onclick="currentSlide(3)"></span>
            </div>
        </div>

यहाँ सीएसएस है:

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

/* Hide the images by default */
.mySlides {
    display: none;
}

.dot {
  cursor: pointer;
  height: 10px;
  width: 10px;
  margin: 0 2px;
  background-color: $grey;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: $white;
}

/* 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}
}

और जे एस:

var slideIndex = 0;
showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none"; 
    }
    slideIndex++;
    if (slideIndex > slides.length) {slideIndex = 1} 
    slides[slideIndex-1].style.display = "block"; 


   for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
    setTimeout(showSlides, 2000); // Change image every 2 seconds
}

सेटटाइमआउट ठीक से काम करता है, डॉट्स को छोड़कर उनके भरण रंग नहीं बदलते हैं।

0
Oksana Shukh 1 सितंबर 2018, 23:28

2 जवाब

इसे अपने फॉर-लूप में showSlides() में रखें।

if (i === slideIndex) {
  dots[i].className = "dot active";
} else {
  dots[i].className = "dot";
}
1
patrickcipot 1 सितंबर 2018, 23:43

प्रत्येक स्लाइड शो में सक्रिय वर्ग को चालू करने के लिए आप बिंदुओं के माध्यम से लूप कर सकते हैं:

var dotActive = document.querySelector('.dot.active');
if (dotActive == null) { // if no dot active...
    document.querySelector('.dot').classList.add("active");
} else { // remove current active and set it to next ele
    dotActive.classList.remove("active");
    (dotActive.nextElementSibling || document.querySelector('.dot')).classList.add("active");
}

मापदंडों का उपयोग करने के बजाय (1,2,3 देखें) आप इस और ईवेंट का उपयोग कर सकते हैं।

var slideIndex = 0;

showSlides();

function showSlides() {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > slides.length) {slideIndex = 1}
    slides[slideIndex-1].style.display = "block";


    var dotActive = document.querySelector('.dot.active');
    if (dotActive == null) {
        document.querySelector('.dot').classList.add("active");
    } else {
        dotActive.classList.remove("active");
        (dotActive.nextElementSibling || document.querySelector('.dot')).classList.add("active");
    }
    setTimeout(showSlides, 2000); // Change image every 2 seconds
}
/* Hide the images by default */
.mySlides {
    display: none;
}
.dot {
    cursor: pointer;
    height: 10px;
    width: 10px;
    margin: 0 2px;
    background-color: grey;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active, .dot:hover {
    background-color: white;
}

/* 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}
}
<div class="slideshow-container">
    <div class="mySlides fade">
        <img src="https://dummyimage.com/100x100/000/fff&text=1" class="welcome__img" style="width:100%">
    </div>
    <div class="mySlides fade">
        <img src="https://dummyimage.com/100x100/000/fff&text=2" class="welcome__img" style="width:100%">
    </div>
    <div class="mySlides fade">
        <img src="https://dummyimage.com/100x100/000/fff&text=3" class="welcome__img" style="width:100%">
    </div>
    <div style="text-align:center">
        <span class="dot" onclick="currentSlide(1)"></span>
        <span class="dot" onclick="currentSlide(2)"></span>
        <span class="dot" onclick="currentSlide(3)"></span>
    </div>
</div>
1
gaetanoM 1 सितंबर 2018, 23:51