改变图像点击，也与时间

Changing Images onClick, also with time

本文关键字：时间 图像 改变      更新时间：2023-09-26

这里有很多类似的话题，但我认为没有一个能完全涵盖我的问题。所以我想在我的主页上做的是，有大的图像和2个按钮，在左边和右边(作为箭头)。我想要3-5图像改变的时间，或者当箭头被点击。

几乎是这两者的组合:http://www.trivium.org/http://www.airbournerock.com/

对于箭头部分，我最初将url存储在数组中，同时跟踪索引，每当单击按钮时，增加索引并使用给定索引处的url更改相应标记的src。但这似乎有点"俗气"。

谢谢你的帮助!

这是一个快速的jQuery解决方案。下面的计时函数不起作用，但您可以了解大意。

var image = [
'images/1.png',
'imgaes/2.png',
// ...
]; //create an array of <img> src's you have to add to this
var tot = image.length; //number of images in array
var c = 0; // current image (array key index)
function loadImage(){
  $("<img/>").attr({src:image[c]}).load(function() {
      $('#image').html( this ); //element you want the image loaded in
  }); 
}
loadImage(); // load 1 image
$('#prev, #next').click(function(){
  //you need to name some arrows with id="prev" and id="next"
  id= this.id==='next' ? c++ : c-- ;
  c= c==-1 ? tot-1 : c%tot ;
  loadImage(); 
});
//this isn't going to work, someone may have to help clean it up, but basically load new image every 3 seconds
setInterval(function(){
  c++;
  loadImage(); 
}, 3000);
相关文章：