Моя анимация перекрестного затухания в 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>