圖片幻燈片和刷新

我想知道我怎麼能有一個JavaScript圖像旋轉/幻燈片，每次它顯示每個圖像（5秒），它刷新從上次顯示。圖片幻燈片和刷新

此外，作爲別的東西，但沒有requered，我想知道是否有可能有一個下方的圖像位置下拉列表（有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); 
}

來源

2010-08-08 Sam

你是什麼意思「它刷新上次顯示的時間」？ – 2010-08-13 03:50:45

因此，圖像刷新，它不只是循環通過相同的圖像，他們的圖像需要定期更新。 – Sam 2010-08-15 06:05:14

你說你想要一個下拉列表。這是否打開一個新的頁面，在您的控制下顯示清新的圖像？或者顯示源頁面？或者在原始頁面上顯示圖像，除了旋轉圖像？ – 2010-08-17 03:28:36

這應該做到這一點...在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>

一些東西......

我並沒有在所有的位置名稱填寫，但應該是很容易
圖像文件名不是imprtant，你可以使用任何東西，例如： http://livetraffic.vicroads.vic.gov.au/images/23008/1281263293.jpg 是相同的 http://livetraffic.vicroads.vic.gov.au/images/23008/hello.jpg
有一些優化，你可以d o但我沒有因時間和清晰度而煩惱。

來源

2010-08-18 15:05:48 donohoe

這裏有很多選項。 http://speckyboy.com/2009/06/03/15-amazing-jquery-image-galleryslideshow-plugins-and-tutorials/

但是，如果你正在談論實際抓取當前圖像http://livetraffic.vicroads.vic.gov.au/region/23004?expanddiv=group1那麼這有點不同。這是你在追求什麼？

來源

2010-08-13 15:52:33 ryan

是的，這就是我希望實現的目標，可以通過刷新圖像來完成。 – Sam 2010-08-15 06:06:12

這是我的解決方案，非常簡單，無限量的照片整齊排列。

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

來源

2012-01-12 16:17:51

我使用了相同的代碼，但它顯示錯誤爲document.getElementById（「slide」）returing null！ – user636207 2012-02-12 19:05:08

也許你在加載dom之前運行了代碼 – 2012-02-27 14:57:53

圖片幻燈片和刷新

回答

相關問題