自分のサイト用に書いた jquery コードで問題が発生しています。
cloudcarouselプラグインを使用して、作成中の Web サイトのホームページに画像のカルーセルを表示しています。カルーセルの HTML コードは次のとおりです。
<div id="carousel" style="width:100%; height:100%;overflow:scroll;">
<img id="sample1image" alt="sample 1" class = "cloudcarousel current" src="img/homepage/random1.png" />
<img id="sample2image" alt= "sample 2" class = "cloudcarousel left leftrotate" src="img/homepage/random2.png"/>
<img id="sample3image" alt = "sample 3" class = "cloudcarousel" src = "img/homepage/random3.png" />
<img id="sample4image" alt = "sample 4" class = "cloudcarousel" src = "img/homepage/random4.png" />
<img id="sample5image" alt="sample 5" class = "cloudcarousel" src = "img/homepage/random5.png" />
<img id="sample6image" alt="sample 6" class = "cloudcarousel right rightrotate" src = "img/homepage/random6.png" />
<input class = "leftrotate" id="left-but" type="button" value="" />
<input class = "rightrotate" id="right-but" type="button" value="" />
<div class="bubble" id="homepagebubble">
<span id="bubbleinnercontainer"><a id="bubbletext" href="#">Sample 1</a></span>
</div>
</div>
そして、jquery で次のコードを使用してコードを初期化しました。
$(document).ready(function() {
$("#carousel").CloudCarousel({
xPos : 500,
yPos : 100,
xRadius : 400,
yRadius : -8,
minScale : 0.8,
speed : 0.3,
bringToFront : true,
buttonLeft : $("input.leftrotate"),
buttonRight : $("input.rightrotate"),
altBox : $("#alt-text"),
titleBox : $("#title-text")
});
$('.leftrotate').click(leftRotation);
$('.rightrotate').click(rightRotation);
});
そして、ここに私の leftRotation メソッドがあります:
function leftRotation() {
$('.bubble').css('display', 'none');
var nextimage = "";
var rightimage = "";
var leftimage = "";
var nextimageindex = $(currentimage).prev().index();
rightimageindex = $('.right').index();
leftimageindex = $('.left').index();
//increment the indexes
rightimageindex -= 1;
leftimageindex -= 1;
if (rightimageindex < 0) {
rightimageindex = rightimageindex + 6;
//if its out of bounds, then bring it back in range
}
if (leftimageindex < 0) {
leftimageindex = leftimageindex + 6;
}
rightimage = $('.cloudcarousel').eq(rightimageindex);
leftimage = $('.cloudcarousel').eq(leftimageindex);
$('.right').removeClass('right rightrotate');
$('.left').removeClass('left leftrotate');
rightimage.addClass('right rightrotate');
leftimage.addClass('left leftrotate');
var currentimage = $('.current').attr('id');
currentimage = "#" + currentimage;
if ($(currentimage).prev().index() == -1)//if this is the first image
{
nextimage = $('.cloudcarousel').eq(5);
$(currentimage).removeClass('current');
nextimage.addClass('current');
$('#bubbletext').text(nextimage.attr('alt'));
} else {
nextimage = $(currentimage).prev();
$(currentimage).removeClass('current');
nextimage.addClass('current');
$('#bubbletext').text(nextimage.attr('alt'));
}
$('.bubble').fadeIn('slow');
}
クラス「bubble」の div は、ホームページ上のボックスを表し、そのテキストは、カルーセルの前にある現在のカルーセル、またはコード内のクラス current によって決定される「現在の」画像と一致します。左右のボタン (id の left-but と right-but) は両方とも、正しい一連のイベントをトリガーします。クリックすると、leftRotation および rightRotation イベントが発生し、current、leftrotate、および rightrotate のクラスが新しい current、left、および right 画像にシフトし、吹き出し内のテキストが変更されます。ただし、カルーセル内の画像に同じメソッドを添付しようとすると、メソッドが最初に添付された画像とその画像のみでクリックが発生します。クラスが変更されても、他の画像では起動しません。
クラスがアタッチされているノードが変更される場合、イベントの特定のクラスに基づいてイベントをアタッチしないのが最善ですか? このイベントを発生させるより良い方法は何ですか? 私はこれで2日間困惑しており、解決策を考え出すのに実際に役立つ可能性があります.