Question

我创建了一个幻灯片，其中每个图像都有一个按钮，单击该按钮可以在下面显示图像。问题是，当单击上一个/下一个箭头（或导航点）并且图像“缩小”时，下一张幻灯片的顶部图像保持“缩小”状态。尝试编写一个函数，以便当单击上一个/下一个按钮/点时，上一个/下一个幻灯片的顶部图像不会“缩小”。 js＆html

$(document).ready(function() {
  $("[id=hBtn]").click(function() {
    if ($("[id=valueProp] img").data("reduced") != true) {
      $("[id=valueProp] img").animate({
        width: '-=1130px'
      }, 600, function() {
        $("[id=valueProp] img").data("reduced", true)
      });
    } else {
      $("[id=valueProp] img").animate({
        width: '+=1130px'
      }, 600, function() {
        $("[id=valueProp] img").data("reduced", false)

      });
    }
  });

  $(".dot, .prev, .next").click(function() {
    if ($("[id=valueProp] img").data("reduced") = true) {
      $("[id=valueProp] img").animate({
        width: '+=1130px'
      }, 600, function() {
        $("[id=valueProp] img").data("reduced", false)

      });
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
<div style="text-align:center">
  <span class="dot" text="1" onclick="currentSlide(1)"></span>
  <span class="dot" text="2" onclick="currentSlide(2)"></span>
  <span class="dot" text="3" onclick="currentSlide(3)"></span>
  <span class="dot" text="4" onclick="currentSlide(4)"></span>
  <span class="dot" text="5" onclick="currentSlide(5)"></span>
  <span class="dot" text="6" onclick="currentSlide(6)"></span>
</div>

 

<div class="mySlides fade">

        <div id="under" style="left: 8%; top: 30px; position: absolute">
            <video autoplay loop="loop" width="1136" height="612">
                <source src="GalaYc.mp4" type="video/mp4">
                Your browser does not support the video tag.
                <img src="gala.png" width="1136" height="612"
                     title="Your browser does not support the <video> tag">
            </video>
        </div>

        <div id="valueProp" style="left: 8%; top: 30px; position: absolute; opacity:0.95">
            <img src="slide1.png" width="1136" height="612">
            <button class="btn" id="hBtn"style="left: 80%; top: 45%; position: relative">&#8646;</button>
        </div>
        
    </div>
<script>
        var slideIndex = 1;
        showSlides(slideIndex);

        // Next/previous controls
        function plusSlides(n) {
            showSlides(slideIndex += n);

        }


        function currentSlide(n) {
            showSlides(slideIndex = n);
        }

        function showSlides(n) {
            var i;
            var slides = document.getElementsByClassName("mySlides");
            var dots = document.getElementsByClassName("dot");
            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>

Answer 1

 if ($("[id=valueProp] img").data("reduced") == true)

已修复...令人尴尬。帮助您重新审视代码-谢谢！

jQuery-在btn点击时将布尔值重置为false

1 个答案: