Javascript网页，下一张图片

javascript for web page, next-prev image

本文关键字：一张 网页 Javascript      更新时间：2023-09-26

我找到了一个在网站上切换图像的脚本，我有问题，使其工作。图像切换得很好，直到你到达第四个，我加了6，但它卡在那里。这是代码，如果有人能告诉我问题在哪里。

谢谢!

var myImg= new Array(5)
  myImg[0]= "recientes1";
  myImg[1]= "recientes2";
  myImg[2]= "recientes3";
  myImg[3]= "recientes4";
  myImg[4]= "recientes5";
  myImg[5]= "recientes6";
myImgSrc = "recientes/";
myImgEnd = ".jpg"
var i = 0;
function loadImg(){
  document.imgSrc.src = myImgSrc + myImg[i] + myImgEnd;
}
function prev(){
  if(i<1){
    var l = i
  } else {
    var l = i-=1;
  }
  document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
}
function next(){
  if(i>2){
    var l = i
  } else {
    var l = i+=1;
  }
  document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
}
window.onload=loadImg;

试试这个:

var myImg= new Array(5)
  myImg[0]= "recientes1";
  myImg[1]= "recientes2";
  myImg[2]= "recientes3";
  myImg[3]= "recientes4";
  myImg[4]= "recientes5";
  myImg[5]= "recientes6";
myImgSrc = "recientes/";
myImgEnd = ".jpg";
var i = 0;
loadImg();
function loadImg(){
  document.imgSrc.src = myImgSrc + myImg[i] + myImgEnd;
}
function prev(){
  i=(i<=0)?myImg.length-1:i-1;
  loadImg();
}
function next(){
  i=(i>=myImg.length-1)?0:i+1;
  loadImg();
}
<

小提琴演示/strong>

<

Additionnal信息/strong>

i=(i>=myImg.length-1)?0:i+1;

可译为

if( i >= myImg.length-1 ){ i = 0; }
else{ i = i+1; }

next()函数中的if块似乎阻止了它继续进行(它到达了列表的末尾)。你应该把这个从2改成myImg。长度- 1，以确保它不会超过您拥有的图像数量。

function next(){   
    if(i>myImg.length-1){
        var l = i   
    } else {
        var l = i+=1;   
    }   
    document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd; 
}

如果您希望next()函数在到达列表末尾时转到列表的开头，则必须修改next()函数以将i重置为零。像这样:

function next(){   
    if(i>myImg.length-1){
        i = 0;
        var l = i; 
    } else {
        var l = i+=1;   
    }   
    document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd; 
}

看起来你的数组长度初始化为5，然后你添加了6个条目。

当你定义数组的长度时(例如new Array(5))，你说数组中将有5个条目，索引为0,1,2,3，&4. 你的代码最终会创建一个长度为6的数组，看起来像你想要的，但认为这是值得注意的，因为如果你试图找到myImg[myImg。

你的prev和next函数是如何被调用的?

您可以使用模数运算符来非常干净和简单地完成此操作…

function prev(){
    i = (i - 1) % myImg.length - 1;
    document.imgSrc.src = myImgSrc + myImg[i] + myImgEnd;
}
function next(){
    i = (i + 1) % myImg.length - 1;
    document.imgSrc.src = myImgSrc + myImg[l] + myImgEnd;
}

%基本上使得传递给它的数字必须在0和它后面的数字之间。因此，对于长度为6的数组，它只允许0到5之间的数字。-1变成5,6变成0

有关模数(余)运算符

的更多信息，请参阅此处。
相关文章：