Question

这里有非常相似的主题，但我认为完全没有涵盖我的问题。所以我想在我的主页上做的是，在左侧和右侧（如箭头所示）有大图像和2个按钮。我希望3-5张图像能够及时更改，或者点击箭头时。

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

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

感谢您的帮助！

Answer 1

这是一个快速的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);

更改图像onClick，也随着时间的推移

1 个答案: