Question

在w3school（试一试）我有这个代码：

<!DOCTYPE html>
<html>
<body>

<img name="slide" class="slider" src="" width="400"/>

<script>
var i = 0;
var path = new Array();
path[0] = "http://vignette2.wikia.nocookie.net/batman/images/9/92/Batman-ArkhamKnight-BatsuitRender.png/revision/latest?cb=20140605151444";
path[1] = "http://vignette4.wikia.nocookie.net/injusticegodsamongus/images/c/c5/BATGIRL.png/revision/latest?cb=20130527034044";
path[2] = "http://vignette2.wikia.nocookie.net/injusticegodsamongus/images/b/bb/Raven_Render.png/revision/latest?cb=20130318184222";
path[3] = "http://vignette1.wikia.nocookie.net/injusticegodsamongus/images/7/7f/ARES.png/revision/latest?cb=20130411230035";

function swapImage() {
    document.slide.src = path[i];

    if (i < path.length - 1)
        i++;
    else 
        i = 0;

    setTimeout("swapImage()", 2000);
}

window.onload = swapImage;

</script>

</body>
</html>

所以我尝试使用setTimeout函数并且它可以正常工作，但是可以将这些图像变慢（）吗？

Answer 1

如果要更改图片显示的持续时间，您应该将setTimeout的第二个参数从2000更改为所需时间（以毫秒为单位）。

要对图像交换使用不同的效果，您应该将行document.slide.src = path[i];更改为其他内容，具体取决于您尝试调用的效果类型。尝试使用开箱即用的具有很多好效果的jQuery，但你也可以使用css来做到这一点。互联网上有很多方法都有很好的解释，所以研究一下，找到自己的方式。

Answer 2

当你说改变它“慢”是否意味着淡入，淡出效果？你可以使用jQuery来做到这一点。

http://api.jquery.com/fadeout/

http://api.jquery.com/fadein/

在您的示例中，更改

<!DOCTYPE html>
<html>
<body>
<img name="slide" class="slider" src="" width="400"/>

...

function swapImage() {
    document.slide.src = path[i];

    if (i < path.length - 1) i++;
    else i = 0;

    setTimeout("swapImage()", 2000);
 }

到

<!DOCTYPE html>
<html>
<body>
<img name="slide1" class="slider" style="display:none;" src="" width="400"/>
<img name="slide2" class="slider" src="" width="400"/>

...


var current = document.slide1;
var next = document.slide2;

function swapImage() {
    var swap;
    current.src = path[i];
    next.src = path[i+1];

    if (i < path.length - 1) i++;
    else i = 0;

    jQuery(current).fadeOut();
    jQuery(next).fadeIn();

    swap = current;
    current = next;
    next = swap;

    setTimeout(swapImage, 2000);
 }

但实际上，使用jQuery和其他辅助函数会对你有很大的帮助。

如何使用具有慢速函数的setTimeout（）

2 个答案: