1. 首页
  2. 问答
  3. 图片幻灯片和刷新

图片幻灯片和刷新

2010-08-08 79 views
2

我想知道我怎么能有一个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

+0

你是什么意思“它刷新上次显示的时间”？ – 2010-08-13 03:50:45

+0

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

+0

你说你想要一个下拉列表。这是否打开一个新的页面，在您的控制下显示清新的图像？或者显示源页面？或者在原始页面上显示图像，除了旋转图像？ – 2010-08-17 03:28:36

回答

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>

一些东西......

  1. 我并没有在所有的位置 名称填写，但应该是很容易
  2. 图像文件名不是imprtant， 你可以使用任何东西，例如： http://livetraffic.vicroads.vic.gov.au/images/23008/1281263293.jpg 是相同的 http://livetraffic.vicroads.vic.gov.au/images/23008/hello.jpg
  3. 有一些优化，你可以d o但我没有因时间和清晰度而烦恼。

来源

2010-08-18 15:05:48 donohoe

0

这是我的解决方案，非常简单，无限量的照片整齐排列。

<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

+0

我使用了相同的代码，但它显示错误为document.getElementById（“slide”）returing null！ – user636207 2012-02-12 19:05:08

+0

也许你在加载dom之前运行了代码 – 2012-02-27 14:57:53

相关问题

 相关问题