Jquery图像从左到右过渡并淡入，在幻灯片中[关闭]答案

【问题标题】：Jquery image transition left to right and fade in, in a slideshow [closed]Jquery图像从左到右过渡并淡入，在幻灯片中[关闭]
【发布时间】：2014-03-02 20:17:19
【问题描述】：

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

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

【问题讨论】：

为了什么？提供有问题的相关代码
您能否提供更多信息并向我们展示您迄今为止所做的尝试？
抱歉，我忘记发布我的代码了。我基本上创建了一个幻灯片，将图形从左向右滑动。但我不确定如何更新它，以便过渡之一淡入并粘住。在六张图片中，我试图让所有其他的幻灯片从左到右滑动，但第三张已经淡入淡出。

标签： javascript jquery html css slideshow

【解决方案1】：

好的，自从你发布它以来，我一直在努力，我想我已经想出了一个首创。

我有很多弱点，但我最大的弱点之一是 .animate 和相互覆盖的动画概念。所以我找到了一些不错的代码HERE，并对其进行了修改。

这个FIDDLE 只是以完全相同的方式为四个图像设置动画。

FIDDLE 允许您通过设置“距离 = 0”来选择停止哪一个。

带有“停止”的JS

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

对我的教导是，您必须在最后一个函数调用中对动画进行任何花哨的操作，否则动画将相互覆盖。

很好的锻炼！

【讨论】：