Jquery image transition left to right and fade in, in a slideshow [closed]

问题

I have a slideshow with 6 graphics. I want to slide the first two graphics from left to right, then the 3rd graphic fade in and stick, and then slide the rest of the graphics from left to right. I am able to create a slideshow with either of the effect, but how do I slide in for some and fade in for some? Below is my code.

<div id='slider_container'>
    <div id="slides">
        <img src='images/Team-Up-wTag_CMYK_Over-White.jpg' />
        <img src='images/Together-all-3-01.jpg' />
        <img src='images/One-Team-One-Focus-RESIZED.jpg' />
        <img src='images/Orlando_Seaworld_ExteriorSeaworldView.jpg' />
        <img src='images/DSC_1465.JPG' />
        <img src='images/DSC_1470.JPG' />
    </div>
</div>

<script type="text/javascript"> 
    $(window).load(function() {
        var slideContainer = $('#slider_container'), slidesHolder = $(slideContainer).children(),  slideWidth = slideContainer.width(), slidePos = 0, slides = $(slidesHolder).children(), slideTotal = slides.length, currentSlide = 0, delay = 3000, slideTime = 800;

        $(slideContainer).css({
            'overflow': 'hidden',
            'position': 'relative'
        });

        $(slidesHolder).css({
            'position': 'absolute'
        });

        for (var i = 0; i < slides.length; i++) {
            $(slides[i]).css({
                'position': 'absolute',
                'top': '0',
                'left': slidePos + 'px'
            });
            slidePos = slidePos + slideWidth;
        }

        $(slidesHolder).css('width', slidePos + slideWidth);

        $(slides).first().clone().css({
            'left': slidePos  + 'px'
        }).appendTo(slidesHolder);

        function animate() {
            $(slidesHolder).delay(delay).animate({
                left: '-=' + slideWidth
            }, slideTime, function() {
                if (currentSlide < slideTotal - 1) {
                    currentSlide++;
                    animate();
                } else {
                    $(slidesHolder).css({
                        'left': 0
                    });
                    currentSlide = 0;
                    animate();
                }
            });
        }
        animate();
    });
</script>

回答1:

Ok, I've been working on this since you posted it, and I think I've come up with a first-cut.

I have many weaknesses, but one of my greatest is .animate and the concept of animations overriding each other. So I found some nice code HERE, and adapted it.

This FIDDLE just animates the four images in exactly the same way.

This FIDDLE allows you to choose which one to stop by making "distance = 0".

JS with "stop"

var $imgs = $('img');
var current = 0;
distance = 75;
animate($imgs[current]);
function animate(element)
{
  $(element).animate(
                     {
                      opacity: '1',
                      left: '+=' + distance
                      }, 
                      2000,
                      function() {
                                 $(element).animate(
                                                    {
                                                     opacity: '0',
                                                     left: '+=' + distance
                                                     }, 
                                                     2000,
                                  function(){
                                             if (current < $imgs.length-1)
                                               {
                                                if (current == 1)
                                                  {distance = 0;}
                                                    else
                                                  {distance = 75;}
                                                ++current;
                                                animate($imgs[current]);
                                                } 
                                             }
                                                     );
                                  }
                       );
}

The teaching point for me was that you have to do any fancy manipulation of the animation in the last function call, otherwise the animates will overwrite each other.

Good exercise!

来源：https://stackoverflow.com/questions/21685067/jquery-image-transition-left-to-right-and-fade-in-in-a-slideshow

标签

javascript

jquery

html

css

slideshow