Image slideshow and refresher_问答_开发者_运维开发者技术经验分享

I'm wondering how I could have a JavaScript image rotator/slideshow, that each time it displays each image (for 5 seconds), it refreshes from the last time it has shown.

Also, as something else, but not requiered, I was wondering if it was possible to have a drop-down list of the image locations down the bottom (there are 12 images) that each links to the appropriate image and refreshes it every 3 minutes.

Here's what I have so far. I know it's outdated, but I can't find anything more modern via Google...thanks!

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 ima开发者_StackOverflow中文版geItem("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);
}

This should do it... tested in Firefox and a few others.

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

A few things...

I didn't fill in all the location names, but that should be easy
The image file name is not imprtant, you could use anything, for example: http://livetraffic.vicroads.vic.gov.au/images/23008/1281263293.jpg is the same as http://livetraffic.vicroads.vic.gov.au/images/23008/hello.jpg
There are a number of optimizations you could do but I didn't bother for reasons of time and clarity.

There are a lot of options out there. http://speckyboy.com/2009/06/03/15-amazing-jquery-image-galleryslideshow-plugins-and-tutorials/

But if you're talking about actually grabbing the current image at http://livetraffic.vicroads.vic.gov.au/region/23004?expanddiv=group1 then that's a bit different. Is this what you're after?

Here is my solution, very simple and infinite amount of photos in a neat array.

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

Since I made my last post, I made a better script, here it is:
if you want to add more images, edit the number "3" in the javascript

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