Question

您好，我想使用纯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);
});

感谢任何有用的提示。 BTW：Firebug在控制台中告诉我以下内容：

图像损坏或截断：

最后，上面的代码是我目前可以处理的关于我目前知识水平和专业知识水平的最大范围。所以请在回答时考虑这个问题

Answer 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/

图库的奇怪js行为

1 个答案: