从JavaScript淡入淡出动画中删除空格-故障排除

时间：2018-09-12 12:32:28

标签： javascript css animation carousel cross-fade

我的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>

2 个答案:

答案 0 :(得分：0)

嗨，您需要在CSS文件中将背景设置为白色

#showcase {
overflow: hidden;
background: white; }

答案 1 :(得分：0)

喜欢这个??? 

$(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 : '&laquo; Previous', // previous button text
        nextText : 'Next &raquo;', // 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').fadeOut(400);
                $('.active').fadeIn(300);
                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').removeClass('active');
            
            $el.find(contentType).eq(counter).addClass('active');
            effects(controls.effect);
            slideNum--;
            checkSlide();
        }
        e.preventDefault();
    })
    
    $(document).on('click', $rightArrow, function(e) {
        if (slideNum < slideCount) {
            var counter = $('.active').index();
      counter++;
            $('.active').addClass('slide').removeClass('active');
            
            $el.find(contentType).eq(counter).addClass('active');
            effects(controls.effect);
            slideNum++;
            checkSlide();
        }
        e.preventDefault();
    })
});
* {
	margin: 0px;
	padding: 0px;
}

#showcase {
	overflow: hidden;
	background: green;
  position: relative;
  height: 284px;
 
}

img {
	width: 368px; /* Temporary - image width will be adjusted in the JS */
}

.disabled {
	color: red !important;
}

.slide {
display:none;
	position: absolute;
	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 : '>>>',
	prevText : '<<<',
	duration : .2
}
</script>

相关问题
最新问题