Question

我有一个带有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>

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

对我而言，教学要点是你必须在最后一次函数调用中对动画进行任何奇特的操作，否则动画会相互覆盖。

好运动！

在幻灯片中，Jquery图像从左到右过渡并淡入

1 个答案: