1

画像ギャラリーに使用している 2 つの配列があります。上部に、必要なさまざまなギャラリーの ID を含むナビゲーションがあります。リンクの 1 つがクリックされると、対応する配列が読み込まれ、その中の画像が表示されるようにしたいと考えています。私のコードは次のようになります: HTML:

<div id="gallery>
   <div id="slideshow-container">
      <img src="images/someimg.jpg" id="current-img" />
   </div>
</div>

jQuery:

var gallery1 = ['images/img1.jpg', 'images/img2.jpg', 'images/img3.jpg'] 
var gallery2 = ['images/img4.jpg', 'images/img5.jpg', 'images/img6.jpg']

jQueryの仕組みをよりよく理解できるように、プラグインを避けたいので、画像のスライドショーを作成するためにこのチュートリアルを使用していました。したがって、私のjQueryの残りの部分は似ています:

編集: クリック関数を @nullability が提案したものに変更しましたが、インデックスを関数に渡す方法がわかりません。すべての関数で渡す場所に入力しようとしましたが、ifif (i < index.length - 1){行でまだインデックスが未定義であるというエラーが発生します。

$(document).ready(function(){

setInterval(advanceImage, 4000)

})

//Creates array variable based on what user clicks
$('.nav li a').click(function(e) {
    e.preventDefault();
    var index = $(this).data('index');
    changeImage(index);
    //alert(gallery);
});

//Creates a current image from array
function currentImage(){
    i = jQuery.inArray($('#current-img').attr('src'), index);
    return i;
}

//Cycles through array
function advanceImage(){
    currentImage();
    if (i < index.length - 1){
        changeImage(i + 1);
    }else{
        changeImage(0)
    }
}

//Change current image to whatever i gives it
function changeImage(i){
$('#current-img').stop().animate({
    opacity: 0,
}, 200, function(){
    $('#current-img').attr('src', index);
    $('#slideshow-container img').load(function(){
        $('#current-img').stop().animate({
            opacity: 1,
        }, 200)
    })
})
}

次のように配列を手動で選択することで、画像を表示および回転させることgallery[0,0]がgallery[0,1]できます。

編集：2つの別々の配列に変更しました。次のような機能はありませんでした：

$('.nav li a').click(function() {
    var gallery = $(this).attr('id');
});

ギャラリーを他のコードに入れて、クリックされたものを選択させますか?

4

1 に答える 1

0

主な問題はナビゲーション ボタンにあるようです。data属性の代わりに、リンクでプロパティを使用したい場合がありidます。たとえば、マークアップがある場合:

<ul class="nav">
    <li><a href="#" class="button" data-index="1">Slide 1</a></li>
    <li><a href="#" class="button" data-index="2">Slide 2</a></li>
    <li><a href="#" class="button" data-index="3">Slide 3</a></li>
</ul>

jQuery データ関数indexを使用してdata 属性にアクセスし、それを使用して次のように関数を呼び出すことができます。changeImage

$('.nav .button').click(function(e) {
    e.preventDefault();
    var index= $(this).data('index');
    changeImage(index);
});

予期しない動作を避けるために、タグをe.preventDefault();クリックするデフォルトのアクションをキャンセルするために含めたことに注意してください。<a>

data追加の配列インデックスを格納する必要がある場合は、複数の属性を持つことができます。たとえば、data-galleryに加えて使用できますdata-index。お役に立てれば。

于 2013-08-05T17:49:05.740 に答える