Question

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

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

以下是按顺序发生的事情。

淡化＃pic1为0不透明度
评估C并更改＃pic1
淡入＃pic1回到
setTimeout再次调用cyclePics。

Answer 2

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

将此添加到您的html页面：

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

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

Answer 3

如果不使用像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/

如果您真的了解其工作原理，您可以执行幻灯片输入/输出效果以及淡入/淡出效果

我在javascript中制作了幻灯片，但我不知道如何让我的照片变得模糊

3 个答案: