奇怪的js图像库的行为

Strange js behaviour of image gallery

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

你好，我想用纯javascript建立一个图像库，并找到了一个很好的方法http://www.trans4mind.com/personal_development/JavaScript/imageSlideShow.htm。

然而，它并没有像预期的那样工作。即使我成功地链接了我的Next/Back按钮来切换数组中的图像，第二个图像也只会在恢复到初始图像之前出现几分之一秒。

在js中有什么乱七八糟的吗?

currentIndex = 0;
MyImages = new Array();
MyImages[0] ="images/sampleimage.jpg";
MyImages[1] ="images/kuh.jpg";

function preload()
{
    for (var i=0;i<MyImages.length;i++){
        var imagesPreloaded = new Image();
        imagesPreloaded.src = MyImages[i];
    }
}
preload();

function Nexter(){
if (currentIndex<MyImages.length-1){
    currentIndex=currentIndex+1;
    document.theImage.src=MyImages[currentIndex];
}
else {
    currentIndex=0;
    document.theImage.src=MyImages[currentIndex];
}
}
function Backer(){
if (currentIndex>0){
    currentIndex=currentIndex-1;
    document.theImage.src=MyImages[currentIndex];
}
else {
    currentIndex=1;
    document.theImage.src=MyImages[currentIndex];
}
}
$("#nav_left").on("click",function(){
    Nexter();
});
$("#nav_right").on("click",function(){
    Backer();
});

//
//img Gallery
//

$(".gallery_nav img").on("mouseover", function (){
    $(this).css("opacity", 0.8);    
});
$(".gallery_nav img").on("mouseleave", function (){
    $(this).css("opacity", 0.1);
});

谢谢任何有用的提示。顺便说一句:Firebug在控制台中告诉我以下内容:

图像损坏或截断:

最后，上面的代码是我目前的知识和专业水平所能处理的最大范围的js。所以在回答

时请考虑到这一点

看起来您的链接标签()的标记正在上升或可能重新加载页面-这会将图库重置为图像#1。尝试在链接标记的href属性中添加#(以表示它们为锚点)，或者直接将它们更改为标签

Example
    <a href="#" class="gallery_nav" id="nav_left"><img src="images/pfeil_links.svg" alt="First image"></a>

这里是一个修改后的JSFiddle，似乎工作正常http://jsfiddle.net/Nf7yR/1/

这个版本使用了span;达到同样的效果:http://jsfiddle.net/Nf7yR/2/

相关文章：