图像幻灯片和复习答案

【问题标题】：Image slideshow and refresher图像幻灯片和复习
【发布时间】：2011-03-26 22:22:14
【问题描述】：

我想知道如何拥有一个 JavaScript 图像旋转器/幻灯片，每次显示每个图像（5 秒）时，它都会从上次显示的时间刷新。

另外，作为其他东西，但不是必需的，我想知道是否可以在底部有一个图像位置的下拉列表（有 12 个图像），每个链接到适当的图像并刷新它每 3 分钟一次。

这是我目前所拥有的。我知道它已经过时了，但我无法通过 Google 找到更现代的东西...谢谢！

var interval = 5; // delay between rotating images (in seconds)
var random_display = 0; // 0 = no, 1 = yes
interval *= 1000;

var image_index = 0;
image_list = new Array();
image_list[image_index++] = new imageItem("http://livetraffic.vicroads.vic.gov.au/images/23004/1281263292.jpg");
image_list[image_index++] = new imageItem("http://livetraffic.vicroads.vic.gov.au/images/23008/1281263293.jpg");
image_list[image_index++] = new imageItem("http://livetraffic.vicroads.vic.gov.au/images/23011/1281263293.jpg");
image_list[image_index++] = new imageItem("http://livetraffic.vicroads.vic.gov.au/images/23013/1281263294.jpg");
image_list[image_index++] = new imageItem("http://livetraffic.vicroads.vic.gov.au/images/23014/1281263294.jpg");
image_list[image_index++] = new imageItem("http://livetraffic.vicroads.vic.gov.au/images/23020/1281263295.jpg");
image_list[image_index++] = new imageItem("http://livetraffic.vicroads.vic.gov.au/images/23025/1281263296.jpg");
image_list[image_index++] = new imageItem("http://livetraffic.vicroads.vic.gov.au/images/23022/1281263296.jpg");
image_list[image_index++] = new imageItem("http://livetraffic.vicroads.vic.gov.au/images/23024/1281263296.jpg");
image_list[image_index++] = new imageItem("http://livetraffic.vicroads.vic.gov.au/images/23033/1281263298.jpg");
image_list[image_index++] = new imageItem("http://livetraffic.vicroads.vic.gov.au/images/23034/1281263298.jpg");
image_list[image_index++] = new imageItem("http://livetraffic.vicroads.vic.gov.au/images/23040/1281263299.jpg");
var number_of_image = image_list.length;
function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
function generate(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
if (random_display) {
image_index = generate(0, number_of_image-1);
}
else {
image_index = (image_index+1) % number_of_image;
}
var new_image = get_ImageItemLocation(image_list[image_index]);
return(new_image);
}
function rotateImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "rotateImage('"+place+"')";
setTimeout(recur_call, interval);
}

【问题讨论】：

你是什么意思“它从上次显示时刷新”？
所以图像会刷新，不仅仅是循环通过相同的图像，它们的图像需要定期更新。
你说你想要一个下拉列表。这是在您的控制下打开一个新页面以显示令人耳目一新的图像吗？还是显示源页面？或者在您的原始页面中显示图像，除了旋转图像？
你能从 Vic 道路页面预测未来图像的文件名吗？

标签： javascript image random

【解决方案1】：

那里有很多选择。 http://speckyboy.com/2009/06/03/15-amazing-jquery-image-galleryslideshow-plugins-and-tutorials/

但是，如果您说的是在http://livetraffic.vicroads.vic.gov.au/region/23004?expanddiv=group1 上实际抓取当前图像，那么情况就有些不同了。这就是你所追求的吗？

【讨论】：

是的，这就是我希望实现的，可以通过刷新图像来实现。

【解决方案2】：

应该可以...在 Firefox 和其他一些软件中测试过。

<!DOCTYPE html>
<html lang="en">
<head> 
<meta charset="utf-8" />
<title>Camera Slideshow</title>
<style>
#wrapper {
    width:   400px;
    overflow:hidden;
}
#slideshow {
    position:relative;
    width:   10000px;
    -webkit-transition: all linear 500ms;
    -moz-transition:    all linear 500ms;
    -o-transition:      all linear 500ms;
    transition:         all linear 500ms;
}
.slide {
    float:   left;
    padding: 24px;
}
.slide img {
    width:   352px;
}
</style>
</head>
<body id="cams" class="">
    <div id="content" class="">
        <div id="wrapper">
            <div id="slideshow" style="left:0;"></div>
        </div>
        <div id="list">
            <select id="locations"></select>
        </div>
    </div>
<script>
var Images = [
    { src: "http://livetraffic.vicroads.vic.gov.au/images/23004/1281263292.jpg", name: "Kings Way / Sturt St" },
    { src: "http://livetraffic.vicroads.vic.gov.au/images/23008/1281263293.jpg", name: "Punt Rd / Swan St" },
    { src: "http://livetraffic.vicroads.vic.gov.au/images/23011/1281263293.jpg", name: "Name of location" },
    { src: "http://livetraffic.vicroads.vic.gov.au/images/23013/1281263294.jpg", name: "Name of location" },
    { src: "http://livetraffic.vicroads.vic.gov.au/images/23014/1281263294.jpg", name: "Name of location" },
    { src: "http://livetraffic.vicroads.vic.gov.au/images/23020/1281263295.jpg", name: "Name of location" },
    { src: "http://livetraffic.vicroads.vic.gov.au/images/23025/1281263296.jpg", name: "Name of location" },
    { src: "http://livetraffic.vicroads.vic.gov.au/images/23022/1281263296.jpg", name: "Name of location" },
    { src: "http://livetraffic.vicroads.vic.gov.au/images/23024/1281263296.jpg", name: "Name of location" },
    { src: "http://livetraffic.vicroads.vic.gov.au/images/23033/1281263298.jpg", name: "Name of location" },
    { src: "http://livetraffic.vicroads.vic.gov.au/images/23034/1281263298.jpg", name: "Name of location" },
    { src: "http://livetraffic.vicroads.vic.gov.au/images/23040/1281263299.jpg", name: "WGF / Montague St" }
];
Images.Current = 0;

var App = {
    run: function(){
        var instance = this;

        this.addSlides();

        setInterval(function(){
            instance.refresh();
            instance.rotate();
        }, 5000);

        document.getElementById("locations").onchange = function() {
            var loc = document.getElementById("locations").value;
            if (loc>-1) {
                Images.Current = (loc-1);
                instance.rotate();
            }
        };
    },

    addSlides: function() { //352 x 288
        var limit = Images.length;
        var html  = '';
        var list  = '<option value="-1">Choose a location</option>';

        for (var i=0; i<limit; i++) {
            html += "<div class='slide'>" +
                    "   <img class='img' alt='" + i + "' title='" + Images[i].name + "' src='" + Images[i].src + "' />" +
                    "</div>";
            list += "<option value='" + i + "'>" + Images[i].name + "</option>";
        }
        document.getElementById('slideshow').innerHTML += html;
        document.getElementById('locations').innerHTML += list;
    },

    refresh: function() {
        var img  = document.getElementsByClassName('img')[Images.Current];
        img.src = Images[Images.Current].src + '?' + (new Date()).getTime();
    },

    rotate: function() {
        Images.Current++;
        if (Images.Current == Images.length) { Images.Current = 0; }
        var xpos = (Images.Current==0) ? 0 : Images.Current * -400;
        document.getElementById('slideshow').setAttribute('style', 'left: ' + xpos + 'px;');
    }
};
App.run();
</script>
</body> 
</html>

一些事情......

我没有填写所有位置名字，但这应该很容易
图像文件名不重要，你可以使用任何东西，例如： http://livetraffic.vicroads.vic.gov.au/images/23008/1281263293.jpg 是相同的 http://livetraffic.vicroads.vic.gov.au/images/23008/hello.jpg
您可以进行许多优化，但出于时间和清晰度的原因，我没有打扰。

【讨论】：

【解决方案3】：

这是我的解决方案，非常简单，可以在一个整齐的阵列中无限数量的照片。

<script>
slist=[
"image1",
"image2",
"image3"
];
var i=0;
function slideshow(){
i=(i>slist.length-2)?0:i+1; 
document.getElementById("slide").src=slist[i];
setTimeout("slideshow()",3000);
}
</script>

<img src="image1" id="slide">

自从我发表上一篇文章以来，我做了一个更好的脚本，这里是：
如果你想添加更多图片，请在 javascript 中编辑数字“3”

<style>
div{position:relative}
div>img{opacity:0;position:absolute;top:0;left:0;
-webkit-transition:opacity 1s linear;
-moz-transition:opacity 1s linear;
-ms-transition:opacity 1s linear;
-o-transition:opacity 1s linear;
transition:opacity 1s linear}
</style>

<script>
var i=0,a=function(o){document.getElementById("i"+i).style.opacity=o;};
setInterval(function(){a("0");i=(i>3)?0:i+1;a("1");},5000);
</script>

<div>
<img id=i0 src="img0.jpg" style="opacity:1">
<img id=i1 src="img1.jpg">
<img id=i2 src="img2.jpg">
<img id=i3 src="img3.jpg">
<img id=i4 src="img4.jpg">
</div>

【讨论】：

我使用了相同的代码，但它显示错误为 document.getElementById("slide") returing null !!