JavaScript 开关中的幻灯片动画不一致答案

【问题标题】：Inconsistent Slide Animation in a JavaScript SwitchJavaScript 开关中的幻灯片动画不一致
【发布时间】：2018-09-06 15:26:36
【问题描述】：

我正在尝试在 JavaScript switch 语句中实现向左/向右滑动动画，并且动画（向左和向右滑动，没有反弹效果并且图像之间没有空白）没有持续激活。此外，当在第一张幻灯片上单击上一个按钮和在最后一张幻灯片上单击下一个按钮时，幻灯片动画仍会激活。这不应该发生。有人有想法吗？请看代码示例。

$(function() {
	// USER EDITABLE CONTROLS
	var content = 'img'; // accepts any DOM element - div, img, table, etc...
	var showControls = true; // true/false shows/hides the slider's navigational controls
	var transition = 'slide'; // supports default, fade, slide
	var transitionDuration = .5; // adjust the time of the transition measured in seconds
	
	// VARIABLE DECLARATIONS
	var contentType = $(content);
	var $el = $('#showcase');
	var $leftArrow = '#left_arrow';
	var $rightArrow = '#right_arrow';
	var $load = $el.find(contentType)[0];
	var slideCount = $el.children().length;
	var slideNum = 1;
	
	// PRELOADS SLIDE WITH CORRECT SETTINGS
	$load.className = 'active';
	
	// ADD SLIDER CONTROLS TO PAGE
	if (showControls === true) {
		$('<div id="controls"><a href="#" id="' + $leftArrow.replace('#', '') + '">&laquo; Previous</a> <a href="#" id="' + $rightArrow.replace('#', '') + '">Next &raquo;</a></div>').insertAfter('#showcase');
		$('#controls').find('#left_arrow').addClass('disabled');
	}
	
	// LOGIC FOR SLIDE TRANSITIONS
	function transitions() {
		switch (transition) {
			// FADE TRANSITION
			case 'fade':
				$('.slide').stop().animate({opacity : 0}, transitionDuration*300, function(){
					$('.active').stop().animate({opacity : 1}, transitionDuration*1000);
				});
				break;

			// SLIDE TRANSITION
			case 'slide':
				if (slideNum > 1) {
					$('.slide').stop().animate({left : -160}, transitionDuration*800, function(){
						$('.active').stop().animate({left : 0}, transitionDuration*1000);
					});
				}
				
				if (slideNum < slideCount) {
					$('.slide').stop().animate({left : 160}, transitionDuration*800, function(){
						$('.active').stop().animate({left : 0}, transitionDuration*1000);
					});
				}
				break;

			// DEFAULT TRANSITION
			case 'default':
				break;
		}
	}
	
	// CHECKS FOR FIRST AND LAST INDEX IN THE SLIDER
	function checkSlide() {
		if (slideNum == 1) {
			$($leftArrow).addClass('disabled');
		} else {
			$($leftArrow).removeClass('disabled');
		}
		
		if (slideNum == slideCount) {
			$($rightArrow).addClass('disabled');
		} else {
			$($rightArrow).removeClass('disabled');
		}
	}

	// NAVIGATIONAL LOGIC FOR PREVIOUS/NEXT BUTTONS
	$(document).on('click', $leftArrow, function() {
		if (slideNum > 1) {
			var counter = $('.active').index();
      counter--;
			$('.active').addClass('slide');
			$('.active').removeClass('active');
			transitions();
			$el.find(contentType).eq(counter).addClass('active');
			slideNum--;
			checkSlide();
		}
	})
	
	$(document).on('click', $rightArrow, function() {
		if (slideNum < slideCount) {
			var counter = $('.active').index();
      counter++;
			$('.active').addClass('slide');
			$('.active').removeClass('active');
			transitions();
			$el.find(contentType).eq(counter).addClass('active');
			slideNum++;
			checkSlide();
		}
	})
});

#showcase {
	width: 160px;
	overflow: hidden;
}

img {
	width: 160px;
}

a {
	color: blue;
}

.disabled {
	color: red !important;
}

.slide {
	display: none;
	opacity: 0;
	position: relative;
	left: 0px;
	right: 0px;
}

.active {
	display: block;
	opacity: 1;
	position: relative;
	left: 0px;
	right: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showcase">
	<img class="slide" src="https://picsum.photos/458/354" />
	<img class="slide" src="https://picsum.photos/458/354/?image=306" />
	<img class="slide" src="https://picsum.photos/458/354/?image=626" />
</div>

【问题讨论】：

当在最左端和最右端的图像上单击按钮时，动画仍然继续，因为您在transitions() 函数上绑定了一个click 函数，该函数没有像您在@ 上那样的条件语句987654326@
@95faf8e76605e973 - 我已更新代码以包含条件。您的回复无助于解决问题的根源，尽管动画不一致。
大声笑，这不是我的意思——我的意思是每个按钮都有两个处理程序，两个处理程序都会触发——一个处理程序不会覆盖另一个处理程序。尝试模拟你的代码
@95faf8e76605e973 - 感谢您的反馈，但我认为我没有正确理解您。您介意发布您正在谈论的代码示例/示例吗？我已将条件添加到我的开关中，这将确定是单击左侧还是右侧导航链接，但我仍然遇到相同的问题。
啊好的。看到你有$(document).on('click', $rightArrow, function() { 和$("#right_arrow").click(function () { 知道我的意思吗？您已将两个单击处理程序绑定到右箭头按钮。这就是为什么当在第一张幻灯片上单击上一个按钮和在最后一张幻灯片上单击下一个按钮时，幻灯片动画仍然激活

标签： javascript jquery animation slider carousel

【解决方案1】：

正如 cmets 中所说，您需要修复条件语句。不久前，您设置了两个 click 处理程序 - 当另一个处理程序被触发时，其中一个被绑定（并且无论任何条件都被触发），这导致 当单击上一个按钮时幻灯片动画仍然激活第一张幻灯片和当最后一张幻灯片点击下一张按钮时问题。

至于动画，请参阅下面的代码。我稍微修改了你的条件。单击上一个时，幻灯片将从左向右移动。单击下一步时，幻灯片将从右向左移动。我使用了一个标志来确定它将进行的运动 - 请参阅转换函数的新参数

$(function() {
  // USER EDITABLE CONTROLS
  var content = 'img'; // accepts any DOM element - div, img, table, etc...
  var showControls = true; // true/false shows/hides the slider's navigational controls
  var transition = 'slide'; // supports default, fade, slide
  var transitionDuration = .5; // adjust the time of the transition measured in seconds

  // VARIABLE DECLARATIONS
  var contentType = $(content);
  var $el = $('#showcase');
  var $leftArrow = '#left_arrow';
  var $rightArrow = '#right_arrow';
  var $load = $el.find(contentType)[0];
  var slideCount = $el.children().length;
  var slideNum = 1;

  // PRELOADS SLIDE WITH CORRECT SETTINGS
  $load.className = 'active';

  // ADD SLIDER CONTROLS TO PAGE
  if (showControls === true) {
    $('<div id="controls"><a href="#" id="' + $leftArrow.replace('#', '') + '">&laquo; Previous</a> <a href="#" id="' + $rightArrow.replace('#', '') + '">Next &raquo;</a></div>').insertAfter('#showcase');
    $('#controls').find('#left_arrow').addClass('disabled');
  }

  // LOGIC FOR SLIDE TRANSITIONS
  function transitions(impl = null) {
    switch (transition) {
      // FADE TRANSITION
      case 'fade':
        $('.slide').stop().animate({
          opacity: 0
        }, transitionDuration * 300, function() {
          $('.active').stop().animate({
            opacity: 1
          }, transitionDuration * 1000);
        });
        break;

        // SLIDE TRANSITION
      case 'slide':
        if (impl == "next") {
          $('.slide').css("left", '160px');
          $('.slide').stop().animate({
            left: 160
          }, transitionDuration * 800, function() {
            $('.active').stop().animate({
              left: 0
            }, transitionDuration * 1000);
          });
        } else if (impl == "prev") {
          $('.slide').css("left", '-160px');
          $('.slide').stop().animate({
            left: -160
          }, transitionDuration * 800, function() {
            $('.active').stop().animate({
              left: 0
            }, transitionDuration * 1000);
          });
        }
        break;

        // DEFAULT TRANSITION
      case 'default':
        break;
    }
  }

  // CHECKS FOR FIRST AND LAST INDEX IN THE SLIDER
  function checkSlide() {
    if (slideNum == 1) {
      $($leftArrow).addClass('disabled');
    } else {
      $($leftArrow).removeClass('disabled');
    }

    if (slideNum == slideCount) {
      $($rightArrow).addClass('disabled');
    } else {
      $($rightArrow).removeClass('disabled');
    }
  }

  // NAVIGATIONAL LOGIC FOR PREVIOUS/NEXT BUTTONS
  $(document).on('click', $leftArrow, function() {
    if (slideNum > 1) {
      var counter = $('.active').index();
      counter--;
      $('.active').addClass('slide');
      $('.active').removeClass('active');
      transitions('prev');
      $el.find(contentType).eq(counter).addClass('active');
      slideNum--;
      checkSlide();
    }
  })

  $(document).on('click', $rightArrow, function() {
    if (slideNum < slideCount) {
      var counter = $('.active').index();
      counter++;
      $('.active').addClass('slide');
      $('.active').removeClass('active');
      transitions('next');
      $el.find(contentType).eq(counter).addClass('active');
      slideNum++;
      checkSlide();
    }
  })
});

#showcase {
  width: 160px;
  overflow: hidden;
}

img {
  width: 160px;
}

a {
  color: blue;
}

.disabled {
  color: red !important;
}

.slide {
  display: none;
  opacity: 0;
  position: relative;
  left: 0px;
  right: 0px;
}

.active {
  display: block;
  opacity: 1;
  position: relative;
  left: 0px;
  right: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="showcase">
  <img class="slide" src="https://picsum.photos/458/354" />
  <img class="slide" style="left: 160px;" src="https://picsum.photos/458/354/?image=306" />
  <img class="slide" style="left: 160px;" src="https://picsum.photos/458/354/?image=626" />
</div>

【讨论】：

谢谢！我看到你做了什么。通过在单击操作为“上一个/下一个”时设置 .slide 的左侧位置，您可以平滑且一致地过渡到下一个内容。感谢您的解释和示例。