Question

我想知道如何制作一个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);
}

Answer 1

应该这样做......在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
你可以做很多优化但我没有时间和清晰的原因。

Answer 2

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

但如果你在谈论实际抓住http://livetraffic.vicroads.vic.gov.au/region/23004?expanddiv=group1的当前图像，那就有点不同了。这就是你要追求的吗？

Answer 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>

图片幻灯片和复习

3 个答案: