0

我正在使用我自己的 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>
4

3 回答 3

0

我认为最好将整个 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>

并根据需要将它们淡入淡出。

于 2012-11-29T17:11:15.283 回答
0

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

滑出和滑入不会同时进行，但您可以获得很好的效果。

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

希望这个想法有帮助

于 2012-11-29T17:16:34.000 回答
0

您最好拥有四个图像并使用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 像素，当然样式表中的样式比像这样内联更好。

于 2012-11-29T17:18:54.847 回答