Jquery图像从左到右转变，并在幻灯片中淡入 [英] Jquery image transition left to right and fade in, in a slideshow

问题描述

我有一个6张图形的幻灯片。我想从左到右滑动前两个图形，然后第三个图形淡入并粘贴，然后从左到右滑动其余的图形。我可以创建一个幻灯片与任一效果，但我如何滑入一些和淡入一些？下面是我的代码。

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>

推荐答案

发布了，我想我已经提出了一个首选。

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

我有很多弱点，但我最大的一个是.animate和动画的概念互相凌驾。因此，我发现了一些不错的代码这里，并进行了修改。

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.

此 FIDDLE 只是以完全相同的方式为四个图片生成动画。

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

此 FIDDLE 可让您

JS使用stop选择要停止的位置

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]);
                                                } 
                                             }
                                                     );
                                  }
                       );
}

我的教导是，你必须对

很好的练习！

这篇关于Jquery图像从左到右转变，并在幻灯片中淡入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！