使用 jquery 滑动一张图片和一张新图片答案

【问题标题】：slide one image off and a new one in using jquery使用 jquery 滑动一张图片和一张新图片
【发布时间】：2012-11-29 17:08:12
【问题描述】：

我正在使用我自己的 animate() 方法创建一个自定义滑动画廊。我有一个脚本，它为画廊预加载图像并在页面完成加载后显示图像 [0]。在 2 秒的时间间隔后，我可以使用 css() 方法将图像元素向左滑动。到目前为止，这是可行的。

$(document).ready(function () {

            //pre-load images
            var i = 0;
            var images = new Array();
            images[0] = "images/environments/img0.jpg"
            images[1] = "images/environments/img1.jpg"
            images[2] = "images/environments/img2.jpg"
            images[3] = "images/environments/img3.jpg"

            $("img#cover").attr("src", images[0]);
                $(this).attr("src", images[1]).css("marginLeft","630px");

            $(function () {
                setInterval(function () {

                    $("img#cover").animate({
                        marginLeft: '-980px',
                        opacity: '1'
                    }, 2000);
                }, 2000);
            });

}); //end of document function

我现在想要一种方法来滑过画廊（数组）并在同一个 img 元素或 div 标签中显示下一个图像，无论哪个效果最好。因此，在 2 秒间隔后，“新”一个滑入，“旧”一个同时滑出。

我不确定你是否可以在 img 标签中存储两张图片？这是可能的还是将 div 标签滑到左边更好？

HTML：

<div id="mainimage"><img id="cover" src="" /></div>

【问题讨论】：

标签： jquery arrays jquery-animate gallery slide

【解决方案1】：

你最好有四个图像，并使用overflow:hidden 属性将它们遮蔽到一个div。

// Your markup
<div id="imgMask" style="overflow:hidden; height:200px; width:200px;">
    <div id="inner" style="position:relative; left:0;">
        <img src="images/environments/img0.jpg" />
        <img src="images/environments/img1.jpg" />
        <img src="images/environments/img2.jpg" />
        <img src="images/environments/img3.jpg" />
    </div>
</div>

// Your js
function slideLeft(){
    $('#inner').animate({
        left: -200px;
    },2000, function(){
        $('#inner img').eq(0).remove().appendTo('#inner');
        $('#inner').css({
            'left',0
        });
    });
}

这样你只滑动一个父元素而不是多个图像。希望它有所帮助 - 上面的代码未经测试，但假设您的图像高度和宽度为 200 像素，当然样式表中的样式比像这样内联更好。

【讨论】：

谢谢，我会试试看。我什至想过在 PS 中“拼接”所有图像，然后使用溢出：隐藏技术愚蠢，是的，但不得已。
.eq() 有什么作用？而 append() 呢？
.eq(a) 从索引 a 处的集合中选择单个元素（因此在本例中为第一张图像）。并且appedTo('#inner') 获取元素并将其放在最后的'#inner' 中。所以基本上该行删除了第一张图片并将其放在最后，这样您的图片将继续无限循环。
好的，非常感谢您的解释。我已经尝试过您的代码，并且效果很好。 css 语法中有一个错误，但是一旦我修复它，它就很有魅力。非常感谢。

【解决方案2】：

您可以滑出旧图像，然后在动画完成后更改 img src 并将其从另一侧滑入（1-更改 src，2-设置显示：隐藏，3-将图像定位在另一侧，4组显示：块，5-幻灯片动画）。

滑出和滑入不会同时进行，但效果会很好。

如果您需要同时滑入/滑出，我也会选择两个 img 标签。

希望这个想法有所帮助

【讨论】：

【解决方案3】：

我认为将整个 img 标签添加到您的 div 会更好。像这样：

<div id="mainimage">
   <img id="cover1" src="scr1.jpg" style="display:none;"/>
   <img id="cover2" src="scr2.jpg" style="display:none;"/>
   <img id="cover3" src="scr3.jpg" style="display:none;"/>
</div>

然后根据需要将它们淡入淡出。

【讨论】：