この画像ギャラリーhttp://tympanus.net/codrops/2011/09/20/responsive-image-gallery/を、私が取り組んでいるサイトに追加しました。問題なく動作しますが、唯一のことは、スライドショーを自動再生するオプションがないことです.
http://www.debellephotography.com/debelleslide/
どんな助けでも大歓迎です!
この画像ギャラリーhttp://tympanus.net/codrops/2011/09/20/responsive-image-gallery/を、私が取り組んでいるサイトに追加しました。問題なく動作しますが、唯一のことは、スライドショーを自動再生するオプションがないことです.
http://www.debellephotography.com/debelleslide/
どんな助けでも大歓迎です!
あちこちで少しずつつなぎ合わせて、それを行う方法を見つけました。助けてくれてありがとう。
var t;
var timer_is_on=0;
function timedCount()
{
$('.rg-image-nav-next').click()
t=setTimeout("timedCount()",1000);
}
function doTimer()
{
if (!timer_is_on)
{
timer_is_on=1;
timedCount(1000);
}
}
function stopCount()
{
clearTimeout(t);
timer_is_on=0;
}
timeCount 関数は、1 秒ごとに次の画像をアクティブにします。doTimer 関数は、タイマーが複数回アクティブになるのを防ぎます。stopCount 関数を使用すると、スライドショーを一時停止できます。
次に、一時停止と再生のための 2 つのボタンを追加しました。
<div class="playbutton"><a href="javascript:doTimer();"><img src="images/play.png" width="24" height="24" alt="Play"></a></div>
<div class="pausebutton"><a href="javascript:stopCount();"><img src="images/pause.png" width="24" height="24" alt="Pause"></a></div>
ここで動作することがわかります: example with autoplay
スライドをループするためにsetInterval関数をトリガーする新しいボタンを作成するとします。次のようになります。
<button onclick="play()">slideshow</button>
function play() {
setInterval(function() {
// Do the code that triggers next image
}, 1000);
}
1000という数字は、実行されている関数間のミリ秒です。
これを試して
var current=1;
function autoAdv()
{
if(current==-1) return false;
$('.es-carousel a').eq(current%$('.es-carousel a').length).trigger('click',[true]); // [true] will be passed as the contentScroll parameter of the click function
current++;
$('.rg-image-nav-prev').eq(current%$('.rg-image-nav-prev').length).trigger('click',[true]); // [true] will be passed as the contentScroll parameter of the click function
current++;
}
// The number of seconds that the slider will auto-advance in:
var changeEvery = 10;
var itvl = setInterval(function(){autoAdv()},changeEvery*1000);