我的 JavaScript 淡入淡出动画只是淡出一个图像并淡入另一张图像，同时在不同图像之间显示空白（绿色）。如何让当前图像淡出以使用 JavaScript 显示队列中的下一个图像而不显示任何空白？淡入淡出应该淡出当前图像以显示其下方的下一个图像。我的 JavaScript 逻辑是否合理，还是我需要重新考虑它应该如何工作？任何想法或故障排除帮助将不胜感激！
$(function() {
// Default controls
var defControls = {
content : 'img', // accepts any DOM element - div, img, table, etc...
showControls : true, // true/false shows/hides the carousel's navigational controls
effect : 'default', // supports default, fade, crossfade, slide, slidingFade
duration : .25, // adjust the time of the effect measured in seconds
prevText : '« Previous', // previous button text
nextText : 'Next »', // next button text
containerWidth : 600 // determines the width of the content container
};
// Variable declarations
var controls = {};
// Checks for userControls
if (typeof userControls !== 'undefined') {
var controls = Object.assign({}, defControls, userControls);
} else {
controls = defControls;
}
var contentType = $(controls.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 carousel with correct settings
$el.css('width', controls.containerWidth);
$load.className = 'active';
// Checks if the content in the carousel is an img and then determines the width of the container based on the size of the content or the user defined-width
$(window).on('load', function () {
if (controls.content == 'img') {
if (typeof userControls.containerWidth !== 'undefined') {
$el.css('width', userControls.containerWidth);
} else {
controls.containerWidth = $el.children().width();
$el.css('width', controls.containerWidth);
}
}
})
// Checks to see if the option for carousel controls are set to show on the page
if (controls.showControls === true) {
$('<div id="controls"><a href="#" id="' + $leftArrow.replace('#', '') + '">' + controls.prevText + '</a> <a href="#" id="' + $rightArrow.replace('#', '') + '">' + controls.nextText + '</a></div>').insertAfter('#showcase');
$('#controls').find('#left_arrow').addClass('disabled');
}
// Logic for the carousel effects
function effects(action) {
switch (controls.effect) {
// Crossfade effect
case 'crossfade':
$('.slide').stop().animate({opacity : 0}, controls.duration*300, function() {
$('.active').stop().animate({opacity : 1}, controls.duration*1000);
});
break;
// Default effect
case 'default':
break;
}
}
// Checks for the first and last index in the carousel
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 the previous/next buttons
$(document).on('click', $leftArrow, function(e) {
if (slideNum > 1) {
var counter = $('.active').index();
counter--;
$('.active').addClass('slide');
$('.active').removeClass('active');
effects('prev');
$el.find(contentType).eq(counter).addClass('active');
slideNum--;
checkSlide();
}
e.preventDefault();
})
$(document).on('click', $rightArrow, function(e) {
if (slideNum < slideCount) {
var counter = $('.active').index();
counter++;
$('.active').addClass('slide');
$('.active').removeClass('active');
effects('next');
$el.find(contentType).eq(counter).addClass('active');
slideNum++;
checkSlide();
}
e.preventDefault();
})
});* {
margin: 0px;
padding: 0px;
}
#showcase {
overflow: hidden;
background: green;
}
img {
width: 368px; /* Temporary - image width will be adjusted in the JS */
}
.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/?image=306" />
<img class="slide" src="https://picsum.photos/458/354/?image=626" />
<img class="slide" src="https://picsum.photos/458/354/?image=806" />
</div>
<script>
userControls = {
effect : 'crossfade',
nextText : 'Forward March!',
prevText : 'RETREAT!',
duration : .3
}
</script>