0

我创建了这个小功能作为图像滚动器的一部分，它的目的是在加载下一张图片之前将图像的大小减小到 0px 宽度，并且增长部分工作正常，但这不会。（我已经尝试了几个这也是变化的）

function shrinkimage()
{
    var image = document.getElementById('test');    

        image.style.display = "block";
        image.style.styleFloat = "left";
        image.style.width = "1024px";
        image.style.transition = "width 0.5s ease 0s";
        image.style.width = "0px";
    }

当我希望它缩小到左侧时，图像就会消失，任何帮助将不胜感激。如果它有助于接下来发生的事情是图像 src 被更改

function rotate(imageNumber) {
           var myimage = new Array;
        //Modify these variables as needed
        //vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv            
        myimage.push("data/images/borderlands.jpg");
        myimage.push("data/images/creed.jpg"); 
        myimage.push("data/images/darksouls.jpg");
        myimage.push("data/images/fable.jpg");
        myimage.push("data/images/fallout.jpg");
        myimage.push("data/images/gears.jpg");
        myimage.push("data/images/halo.jpg");


        var time = 5000; //5000 milliseconds = 5 seconds            
        //^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

        var image = document.getElementById('rotator');

        if (imageNumber < myimage.length) {

            shrinkimage();
            hideimage();


            setTimeout(function () {image.src = myimage[imageNumber];}, 500);



            growimage(); 

            imageNumber++;
        }
        else {
            imageNumber = 0;

            shrinkimage();
            hideimage();

            image.src = myimage[imageNumber];

            growimage();

            imageNumber++;
        }
        var t = setTimeout("rotate(" + imageNumber + ")", time);
    }



function shrinkimage()
{
var image =document.getElementById('rotator');
    image.style.styleFloat = "left";
    image.style.width = "1024px";
    image.style.transition = "width 0.5s ease 0s";
    image.style.width = "0px";

}

function hideimage()
{
var image =document.getElementById('rotator');
{
    image.style.display = "none";
}

function growimage()
{
 var image =document.getElementById('rotator');
        image.style.display = "block";
        image.style.width = "0px";
        image.style.styleFloat = "right";
        image.style.transition = "width 0.5s ease 0s";
        image.style.width = "1024px";

}

.slider {
    border: 0px;
    width: 1024px;
    height: 400px;
    transition:  width 0.5s ease 0s;
    -mox-transition:  width 0.5s ease 0s;
    -webkit-transition:  width 0.5s ease 0s;
    -o-transition:  width 0.5s ease 0s;
    -ms-transition:  width 0.5s ease 0s;
    overflow: hidden;
}

#slider_box{
    width:1024px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    background-color: #000000;
    border: 5px #000000 solid;
}

如果您看不到我要做什么，图像旋转器将旧图像向左缩小并将新图像向左增长。生长部分效果很好，但收缩部分不会

4

2 回答 2

0

如果在转换完成之前源发生变化，你就会遇到这个问题，就像你将 css 设置为display: none. 尝试确保转换完成后图像源发生变化。例如，您可以使用以下内容：

setTimeout(function () {
    image.src = 'path/to/newSource.png';
  }, 500);
于 2013-11-04T00:08:14.667 回答
0

用css中的transition初始化图片

#test {
    transition: width 0.5s ease 0s;
}

然后在函数中更改style.width

function shrinkimage() {
    var image = document.getElementById('test');
    image.style.width = '0px';
}
于 2013-11-04T00:05:26.777 回答