Jquery函数不应该在它应该的时候向Dom元素添加类。尝试构建按钮功能幻灯片

问题描述 投票：0回答：3

我正在尝试为项目创建幻灯片。

我构建的代码相当简单，但由于某种原因，我只能使下一个箭头工作，而不是前一个。

当您单击下一步时，它将从当前图像中删除活动的类，将该类添加到下一个图像并将显示更改为新的活动图像。

单击上一步时，它将删除活动类，但不会向任何其他元素添加任何类。然后由于某种原因将显示更改为最终图像。

我已经尝试重新排列调用函数的顺序。我还试图看看当活动类被添加到最后一个图像时会发生什么（它有相同的问题，但相反，所以现在接下来不起作用但以前很好）。

var activeSlide = $('.active');
var nextSlide = activeSlide.next('.slide');
var prevSlide = activeSlide.prev('.slide');
var arrow = $('.arrow');
var firstSlide = $('.first');
var lastSlide = $('.last');

// slideshow functions

// next arrow
function nextArrow () {
  if (!activeSlide.hasClass('last')) {
            activeSlide.removeClass('active');
            nextSlide.addClass('active');
            activeSlide = nextSlide;
            nextSlide = activeSlide.next('.slide');
            // check if new slide is last slide and remove the click button
            if (activeSlide.hasClass('last')) {
                $('.next').fadeOut();   
            }
        }  
};
// previous arrow
function prevArrow () {
    if(!activeSlide.hasClass('first')) {
        activeSlide.removeClass('active');
        prevSlide.addClass('active');
        activeSlide = prevSlide;
        prevSlide = activeSlide.prev('.slide');
        // check if new slide is the first slide and remove the click button
        if (activeSlide.hasClass('first')) {
            $('.previous').fadeOut();
        }
    } 
};

//click element and call functions
$('.arrow').click( function () {
    if ($(this).hasClass('next')) {
        nextArrow();
    } else {
        prevArrow();        
    }
});
#slideshow {
    position: relative;
    height: 400px;  
    width: 600px;
    margin: 15% auto;
}
.slide {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8;
    height: 100%;
    width: 100%;
}
.active {
    z-index: 10;
}
.arrow {
    text-decoration: none;
    display: inline-block;
    padding: 8px 16px;
}
.arrow:hover {
    background-color: #ddd;
    color: black;
    opacity: 0.9;
    cursor: pointer;
}
.previous {
    left: 0;
}

.next {
    right: 0;
}
.arrow {
    z-index: 11;
    background-color: #ddd;
    color: black;
    position: absolute;
    top: 50%;
    opacity: 0.5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slideshow">
        <div id="slides">
            <img class="slide active first" src="Toscana 1.jpg" alt="image of toscana, slideshow image 1" />
            <img class="slide" src="Toscana 2.jpg" alt="image of toscana, slideshow image 1" />
            <img class="slide" src="Toscana 3.jpg" alt="image of toscana, slideshow image 2" />
            <img class="slide last" src="Toscana 4.jpg" alt="image of toscana, slideshow image 3" />
        </div>
        <div class="previous arrow">&#8249;</div>
        <div class="next arrow">&#8250;</div>
    </div>
    <script src="javascript/practice.js"></script>

理论上，您应该能够单击下一步并查看序列中的下一个图像。然后，当您想要查看序列中的上一个图像时，您应该能够单击“上一个”，然后它将从当前图像中删除活动类并将其添加到之前的图像中。

如果有人能够提供帮助，真的很感激帮助了解出了什么问题。

javascript jquery slideshow jquery-click-event
3个回答
0
投票

您依赖于全局变量来维护您的程序状态，但并不总是设法保持变量的状态与DOM的状态相匹配。

使用DOM作为单一事实来源可能更好：“活动”幻灯片是当前具有“活动”类的节点，您可以根据其位置计算下一个和前一个。

这还需要对“下一个”/“上一个”按钮可见性进行一些处理：你在结束时和范围的开头隐藏了按钮，但从未将它们带回来;您还需要加载最初禁用的“上一步”按钮。

//No global variables. Use $('.active') to determine the currently active slide

// next arrow
function nextArrow() {
  var activeSlide = $('.active');
  if (activeSlide.hasClass('last')) return; // bail if the user managed to click the 'next' button while it was fading out

  activeSlide.removeClass('active');
  activeSlide.next().addClass('active');
  // $('.active') is now the "next" slide
  if ($('.active').hasClass('last')) { 
    $('.next').fadeOut();
  } 
  
  // Always bring back the "previous" button when user hits next:
  $('.previous').fadeIn(); 
};

// previous arrow
function prevArrow() {
  var activeSlide = $('.active');
  if (activeSlide.hasClass('first')) return;
  activeSlide.removeClass('active');
  activeSlide.prev().addClass('active');
  if ($('.active').hasClass('first')) {
    $('.previous').fadeOut();
  }
  $('.next').fadeIn();
};

//click element and call functions
// removing the unnecessary intermediate function here:
$('.next').click(nextArrow)
$('.previous').click(prevArrow)
#slideshow {
  position: relative;
  height: 200px;
  width: 300px;
  margin: 15% auto;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8;
  height: 100%;
  width: 100%;
}

.active {
  z-index: 10;
}

.arrow {
  text-decoration: none;
  display: inline-block;
  padding: 8px 16px;
}

.arrow:hover {
  background-color: #ddd;
  color: black;
  opacity: 0.9;
  cursor: pointer;
}

.previous {
  left: 0;
  display:none;
}

.next {
  right: 0;
}

.arrow {
  z-index: 11;
  background-color: #ddd;
  color: black;
  position: absolute;
  top: 50%;
  opacity: 0.5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slideshow">
  <div id="slides">
    <img class="slide active first" src="https://placehold.it/600x400" alt="image of toscana, slideshow image 1" />
    <img class="slide" src="https://placehold.it/601x401" alt="image of toscana, slideshow image 2" />
    <img class="slide" src="https://placehold.it/602x402" alt="image of toscana, slideshow image 1" />
    <img class="slide last" src="https://placehold.it/603x403" alt="image of toscana, slideshow image 1" />
  </div>
  <div class="previous arrow">&#8249;</div>
  <div class="next arrow">&#8250;</div>
</div>
0
投票

你没有在你的下一个箭头功能中设置prevSlide。所以当你开始时，prevSlide是空的。然后单击下一个箭头按钮并将活动幻灯片设置为nextSlide，然后在活动后将nextSlide设置为1，但是您没有设置上一张幻灯片，因此它保持为null

例如，幻灯片1 =当前幻灯片，幻灯片2 =即将开始活动，幻灯片3 =即将开始

单击下一个箭头的操作应该是：

  1. 将prevSlide设置为当前幻灯片（此操作不会发生）
  2. 将activeSlide设置为下一张幻灯片
  3. 将nextSlide设置为next-slide.next

同样在prevArrow中，您需要设置nextSlide

0
投票

你可以试试$（'。active'）;

        if(!activeSlide.hasClass('first')) {

            var currentSlide = $('.active');
            var prevSlide = currentSlide.prev();

             currentSlide.removeClass('active');
             prevSlide.addClass('active');
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.