0

こんにちは、私は純粋な JavaScript で画像ギャラリーを構築したいと考えており、非常に良いアプローチhttp://www.trans4mind.com/personal_development/JavaScript/imageSlideShow.htmを見つけました。

ただし、期待どおりに動作しません。[次へ] ボタンと [戻る] ボタンをリンクして配列内の画像を切り替えることができたにもかかわらず、2 番目の画像は最初の画像に戻る前にほんの一瞬しか表示されませんでした。

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 に答える