7秒后Javascript幻灯片图片

时间:2014-01-04 20:55:56

标签: javascript html css testing pack

http://jsfiddle.net/UWLsB/189/

我试图让图像在7秒后向左滑动,怎么会不起作用?

HTML:

<div id="container">
    <div id="pack">
        <img id="pack" src="http://imgur.com/uGMzOGM.png">
    </div>

使用Javascript:

function FetchData() {
    $("#pack").css('margin-left', 0);
    $("#pack").css('margin-right', 0);
    $("#pack").animate({
        left: '-1000px'
    }, 'slow');
});
}
setTimeout(FetchData, 7000);

CSS:

#pack {
    margin: 5px auto;
    position:fixed;
}
#container {
    overflow:hidden;
}

2 个答案:

答案 0 :(得分:5)

您只是语法错误。应完全删除});行:

http://jsfiddle.net/UWLsB/190/

我认为您打算在同一行使用})的语法,或者从以下教程中获取它:

setTimeout(function () {
    // .animate call stuff here
}, 7000);

顺便说一下,你可以使用动画完全使用CSS:

http://jsfiddle.net/UWLsB/192/

答案 1 :(得分:2)

http://jsfiddle.net/UWLsB/191/

function FetchData() {
    $("#pack").css('margin-left', 0);
    $("#pack").css('margin-right', 0);
    $("#pack").animate({
        left: '-1000px'
    }, 'slow');
}
setTimeout(FetchData, 7000);

你也可以把这个函数的前两行变成这样的一行

$("#pack").css({"margin-left": "0", "margin-right": "0"});