1

我用 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>
4

3 回答 3

1

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 方法。您可以使用回调函数来计时，以便在动画结束时发生。

以下是它按顺序发生的方式。

  1. 将#pic1 淡化为 0 不透明度
  2. 评估 C 并更改 #pic1 的 src
  3. 淡入 #pic1
  4. setTimeout 再次调用cyclePics。
于 2012-08-14T23:06:39.727 回答
0

jQuery 是一个 javascript 插件，它可以让你做各种各样的事情，从动画到轻松操作 html 元素。在你的情况下，jQuery 是要走的路。

将此添加到您的 html 页面：

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

然后去找一个jQuery教程，帮自己一个忙，彻底学习。专注于animate()功能。只需要 jQuery 就足够了，但也有一些其他的扩展可以让幻灯片更容易。例如，slidesjs

于 2012-08-14T23:06:53.370 回答
0

以下是您可以在不使用 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);
}

这将首先使图片透明，然后定义一个新图像，然后再次将不透明度移动到 1。现在如果你想让它变得平滑，你应该包括 CSS 代码：

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

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

如果您真的了解它的工作原理，您可以制作滑入/滑出效果以及淡入/淡出效果

于 2014-12-17T12:34:17.350 回答