JavaScript Photo Slider

时间:2012-01-03 17:15:05

标签: javascript jquery

我正在制作一个JS脚本,它将放在标题div中并显示几张图片。我查看了JQuery Cycle,但它不属于我的联盟。下面我写的代码冻结了浏览器,我应该使用带有timer var的for循环吗?

<script type="text/JavaScript" language="JavaScript">
var timer;
for (timer = 0; timer < 11; timer++) {
    if (timer = 0) { 
    document.write('<img src="images/one.png">');
    }

    if (timer = 5) {
    document.write('<img src="images/two.png">');
    } 

    if (timer = 10) {
    document.write('<img src="images/three.png">');
    } 
}   
</script>

谢谢!

3 个答案:

答案 0 :(得分:4)

假设您想要一个脚本来旋转图像,而不是像代码那样将它们写入页面,您可以使用以下内容:

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>

<body>
<div id="target"></div>
<script>
var ary = ["images/one.png","images/two.png","images/three.png"];
var target = document.getElementById("target");
setInterval(function(){
    target.innerHTML = "<img src=\""+ary[0]+"\" />";
    ary.push(ary.shift());
},2000);
</script>

</body>
</html>

当然上面的代码没有jQuery给你的效果(比如淡入淡出),但它也不需要加载整个jQuery库来实现这么基本的东西。

答案 1 :(得分:2)

在页面加载后运行脚本怎么样?

<script>
// in <head> //
function load() {
    var headDiv = document.getElementById("head");
    var images = ["images/one.png", "images/two.png"];
    for(var i = 0; i<images.length; i++) {
        image = document.createElement("img");
        image.src = images[i];
        headDiv.appendChild(image);
    }
}
</script>

然后使用<body onload="load();">运行脚本。

修改 为了添加延迟加载图像,我重写了代码:

<script>
// in <head> //
var displayOnLoad = true; // Set to true to load the first image when the script runs, otherwise set to false to delay before loading the first image
var delay = 2.5; // seconds to delay between loading images
function loadImage(url) {
    image = document.createElement("img");
    image.src = images[i];
    headDiv.appendChild(image);
}
function load() {
    var headDiv = document.getElementById("head");
    var images = ["images/one.png", "images/two.png"];
    for(var i = 0; i<images.length; i++) {
        setTimeout(loadImage(images[i]), (i+displayOnLoad)*(delay*1000));
    }
}
</script>

如果要在加载第一张图像之前等待指定的displayOnLoad = false;,请设置delaydelay以秒为单位设置。我建议在图像之间等待一秒钟,因为它们可能需要一些时间才能下载(取决于用户的互联网速度)。

与第一个代码段一样,我没有测试代码,所以请告诉我是否发生错误,我会看看。

答案 2 :(得分:1)

由于您在问题中使用了jquery标记,我认为您可以使用jQuery。在这种情况下,您可以执行以下操作:

在静态HTML中,包含img标记并将其id设置为某些内容(在我的示例中,它设置为myImg)并将其src属性设置为第一个图像,例如:

<img id="myImg" src="images/one.png">

接下来,使用jQuery延迟脚本的执行,直到页面加载完毕,然后使用setTimeout创建进一步的延迟,以便用户在更改之前可以花几秒钟查看图像:

<script>
var imgTimeoutMsecs = 5000; // Five seconds between image cycles

$(function() {
   // Document is ready
   setTimeout(function() {
           // We will get here after the first timer expires.
           // Change the image src property of the existing img element.
           $("#myImg").prop("src", "images/two.png");

           setTimeout(function() {
                   // We will get here after the second, nested, timer expires.
                   // Again, change the image src property of the existing img element.
                   $("#myImg").prop("src", "images/three.png");
               }, imgTimeoutMsecs);
       }, imgTimeoutMsecs);
});
</script>

当然,这种方法并不能很好地扩展,所以如果你总共使用三个以上的图像,你想要修改这样的方法:

var imgTimeoutMsecs = 5000; // Five seconds between image cycles
// Array of img src attributes.
var images = [
                 "images/one.png",
                 "images/two.png",
                 "images/three.png",
                 "images/four.png",
                 "images/five.png",
             ];
// Index into images array.
var iCurrentImage = 0;

function cycleImage() {
    // Increment to the next image, or wrap around.
    if (iCurrentImage >= images.length) {
        iCurrentImage = 0;
    }
    else {
        iCurrentImage += 1;
    }
    $("#myImg").prop("src", images[iCurrentImage]);

   // Reset the timer.
   setTimeout(cycleImages, imgTimeoutMsecs);
}

$(function() {
   // Document is ready.
   // Cycle images for as long as the page is loaded.
   setTimeout(cycleImages, imgTimeoutMsecs);
});

可以对该示例进行许多改进。例如,您可以使用setInterval代替setTimer来略微简化此代码。