0

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

但是，它没有按预期工作。即使我设法链接我的下一个/后退按钮来切换阵列中的图像，第二个图像也只会出现几分之一秒，然后再恢复为初始图像。

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。所以请在回答时考虑这一点

4

1 回答 1

1

看起来您的我们的链接标签 () 的标记正在提升或可能重新加载页面 - 这会将图库重置回图像 #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/

这是一个使用跨度的版本；达到同样的效果：http: //jsfiddle.net/Nf7yR/2/

于 2013-04-16T14:09:12.807 回答