幻灯片，将图像滑入其他幻灯片答案

【问题标题】：Slideshow, slide image in as other slides out幻灯片，将图像滑入其他幻灯片
【发布时间】：2015-10-01 19:34:05
【问题描述】：

我目前正在使用 show 和 hide 功能制作一个 jquery 幻灯片放映，总的来说它工作得很好。我想不通的是如何在第一张图片滑出的同时让一张图片滑入。它只是等待第一张图像滑出，然后再滑入下一张。我想要的是让一个图像在另一个滑出的同时滑出，而不是让图像滑入，而不必等待第一个图像完成滑出。

感觉好像我在某个地方犯了错误..

HTML

<div class="slider">
        <a href="https://google.com"><img id="1" src="bilder/partner.jpg" type="jpg/png">
        <a href="https://msn.com"><img id="2" src="bilder/värmeplatta.jpg" type="jpg/png">
        <a href="https://twitter.com"><img id="3" src="bilder/Img3.jpg" type="jpg/png">
    </div>

CSS

.slider
        {
            width:600px;
            height:300px;
            overflow:hidden;
            margin: auto;
            background-color:white;
            background-image:url(LoadingLogo.gif);
            background-size:50px 50px;
            background-position:center;
            background-repeat:no-repeat;
            border:2px solid;
        }
        .slider img
        {
            width:600px;
            height:300px;
            display:none;
        }

Javascript

 function Slider()
                {
                    $("#1").show("slide",{direction:'right'},800);
                    $("#1").delay(4500).hide("slide",{direction:'left'},800);

                    var sc=$(".slider img").size();
                    var count=2;

                    setInterval(function()
                    {
                        $("#"+count).show("slide",{direction:'right'},800);
                        $("#"+count).delay(4500).hide("slide",{direction:'left'},800);

                        if(count==sc)
                            count=1;
                        else
                            count=count+1;  
                    },6100)
                }

【问题讨论】：

删除 .delay(4500) 部分
.delay(4500) 是使图像停留 4.5 秒的原因。删除图像中唯一的结果，只是再次滑入并直接滑出。

标签： javascript jquery css slideshow

【解决方案1】：

我无法创建小提琴，但尝试使用此代码而不是提供：

function Slider() {

$("#1").show("slide",{direction:'right'},800);

var slideCount = $('.slider').find('img').length,
    prevSlide = 1,
    activeSlide = 2;

    setInterval(function() {

        $('#' + prevSlide ).hide('slide',{direction:'left'},800);

        $('#' + activeSlide ).show('slide',{direction:'right'},800);

        activeSlide++;
        prevSlide = activeSlide - 1;

        if( activeSlide === slideCount )
            activeSlide = 1;

        if( prevSlide === 0 )
            prevSlide = slideCount;

   },6100)
}

【讨论】：