0

表示するスライドに基づいて表示されるコンテンツを変更する JQuery 関数があります。3 つの円のうちの 1 つをクリックすると、スライドショーのように変化します。ただし、唯一の問題は、コンテンツを変更するために円の 1 つをクリックする必要があることです。アニメーションを使用して、目的のコンテンツを自動的にスライドさせる JQUERY 関数も必要です。コードを自動化するにはどうすればよいですか?

ライブ Web サイト: http://www.getstatewideroofing.com

JSFIDDLE: http://jsfiddle.net/h5wVc/4/

私のJQUERY（私は1.8.2を使用しています）：

$(document).ready(function() {
$('.circle1').click(function () {
    $('#slideshow img').replaceWith('<img src="images/roof.png"/>');
    $('#slideshow-bottom p').replaceWith('<p> Some text </p>');
});
$('.circle2').click(function () {
    $('#slideshow img').replaceWith('<img src="https://sphotos-a.xx.fbcdn.net/hphotos-
ash4/313870_456560374416571_509297138_n.jpg"/>');
    $('#slideshow-bottom p').replaceWith('<p>Some text</p>');
});
$('.circle3').click(function () {
    $('#slideshow img').replaceWith('<img src="http://i.imgur.com/1hxQNiw.jpg"/>');
    $('#slideshow-bottom p').replaceWith('<p>Some text</p>');
});
});
4

2 に答える 2

0

自動スクロール機能を構築する方法の例を次に示します。ショーは再開されないことに注意してください (私はそれをあなたに任せました) -ここは助けを求めるのに良い場所です. 私が作成した例では、スライドショーが自動的に開始され、次の項目に進みます。あなたがする必要があるのは、currentItem（私のコードを参照）を配列の最後に追加して、常に「次の」スライドが並んでいるようにすることです。このコードと上記のヒントは、探しているものを構築するのに十分なはずです。

$(function() {
    setInterval(update, 2000);
});

function update() {
  var ItemToLoad = currentItem.next();
  ItemToLoad.trigger('click');
  currentItem = ItemToLoad;
}

作業例 http://jsfiddle.net/h5wVc/20/

于 2013-03-22T18:50:15.373 に答える
0

スライドをページで利用できるようにし、それに応じて css / javascript を使用してアニメーション化して表示する方がよいというコメントに同意します。ただし、質問の内容を達成するための非常に簡単な方法は、最初のマーカーを設定してから setInterval を使用することですグループ内の次のスライドのクリックをシミュレートします。何かのようなもの

var marker = 1;

var imgclick = function() {  
    marker = ( marker === 3 ? 1 : ++marker );
    $('.circle'+marker).click();
};

window.setInterval(imgclick,1000);

imgclick の呼び出し後の整数は、次のクリックがミリ秒単位でシミュレートされるまでの遅延であり、ループは 3 番目のスライドの後にリセットされます (ただし、これを使用して任意の数のスライドに対応するように簡単に変更できます)。

marker = ( marker === $("[class^=circle]").length ? 1 : ++marker );

私はあなたのフィドルを更新して、これが機能していることを示しました - http://jsfiddle.net/h5wVc/28/

于 2013-03-22T18:58:14.027 に答える