我已经用javascript制作了一个幻灯片，但我不知道如何让我的照片发呆

我用javascript制作的幻灯片非常快速地改变了图片。我想阻止它们闪烁到下一个，而是包含更多的 javascript 以使图片缓慢更改。

我在stackoverflow上查找了这个，其他人似乎使用JQuery或我不太了解的东西。我有没有可能在我的 javascript 中添加某种延迟？

这是我所拥有的：

<html>
<head>
<script type="text/javascript">
    var pics = new Array(10);
    pics[0] = "images/pic1.jpg";
    pics[1] = "images/pic2.jpg";
    pics[2] = "images/pic3.jpg";
    pics[3] = "images/pic4.jpg";
    pics[4] = "images/pic5.jpg";
    pics[5] = "images/pic6.jpg";
    pics[6] = "images/pic7.jpg";

    var c = 0;
    var timer = 0;
    function cyclePics() {
        document.getElementById("pic1").src = pics[c];
        c++;
        if (c == 7) {
            c = 0;
        }
        timer = setTimeout("cyclePics()", 2000);
    }
</script>
</head>
<body onLoad="cyclePics()"> 
<div>
<img src="images/pic1.jpg" id="pic1"/>
</div>

</body>
</html>

jQuery使这些东西变得容易。

function cyclePics() {
        $("#pic"+c).animate({opacity:0}, 2000, function(){
            c++;
            if (c == 7) {
                c = 0;
            }
            document.getElementById("pic1").src = pics[c];
             $("#pic"+c).animate({opacity:1}, 2000, function(){ setTimeout(cyclePics, 2000) });
        })

    }

此代码使用 jQuery 的 animate 方法。您可以使用回调函数对内容进行计时，以便它在动画结束时发生。

这是它如何按顺序发生的。

入 #pic1 0 不透明度
评估 C 并更改 #pic1 的 src
入 #pic1
设置超时以再次调用循环图片。

以下是您可以在不使用 JQuery 等库的情况下执行的操作。它是纯粹的CSS/Javascript。

您可以在互联网上阅读有关过渡动画的内容。通过转换，您可以确保CSS属性更改非常缓慢。例如，你可以这样做。

function nextImg(){                         
    diaimg.style.opacity ="0";
    window.setTimeout (
    function(){
        diaimg.style.opacity ="1";
        document.images["urOBJ"].src = urArray[imgnr].src;
        imgnr++;
        if (imgnr>9){imgnr = 1;}
        }, 500);  // u can play a bit with this delay
}
function slider(){                     //nextIMG will be called every 2000ms
    IntervalID = setInterval("nextImg()", 2000);
}

这将首先使 picure 透明，然后定义一个新图像，然后再次将不透明度移动到 1。现在，如果您希望它流畅，您应该包含CSS代码：

    opacity: 1; transition: opacity 1s ease-in-out;

这不是超级花哨，但它有效。如果你想要更好的东西，你应该阅读这篇文章：http://css-tricks.com/almanac/properties/t/transition/

如果你真的了解它是如何工作的，你可以做滑入/滑出效果以及淡入/淡出效果

jQuery是一个javascript插件，它允许你做各种各样的事情，从动画到轻松操作html元素。就你而言，jQuery是要走的路。

将此添加到您的 html 页面：

<script src="http://code.jquery.com/jquery-latest.min.js"
    type="text/javascript"></script>

然后去找一个jQuery教程，帮自己一个忙，彻底学习它。专注于animate()功能。仅jQuery应该是您所需要的，但是还有其他一些扩展可以使幻灯片更加容易。例如，slidesjs

相关内容

最新更新

热门标签：