我已经用JavaScript进行了幻灯片放映，但是我不知道如何使照片变得发呆

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

这是顺序发生的方式。

将＃pic1渐隐为0
评估C并更改＃pic1的src
＃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。

您可以在Internet上阅读有关过渡动画的内容。 通过过渡，您可以确保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 个解决方案

解决方案1
1 2012-08-14 23:06:39

解决方案2
0 2012-08-14 23:06:53

解决方案3
0 已采纳 2014-12-17 12:34:17

我已经用JavaScript进行了幻灯片放映，但是我不知道如何使照片变得发呆

问题描述

3 个解决方案

解决方案1 1 2012-08-14 23:06:39

解决方案2 0 2012-08-14 23:06:53

解决方案3 0 已采纳 2014-12-17 12:34:17

解决方案1
1 2012-08-14 23:06:39

解决方案2
0 2012-08-14 23:06:53

解决方案3
0 已采纳 2014-12-17 12:34:17