2011-06-30 17 views
0

私はjqueryとjavascriptを一般的に使い慣れているので、これは簡単な質問です。どんな助けでも大変に感謝します。私はスライドショーの自動ページングを持っているので、コントローラをクリックすると(#thumbs li)ショーが一時停止します。ここにはJS:Jqueryスライドショースクリプト、クリック時の一時停止

<script type="text/javascript"> 
var currentImage; 
var currentIndex = -1; 
var interval; 
function showImage(index){ 
    if(index < $('#bigPic div').length){ 
     var indexImage = $('#bigPic div')[index] 
     if(currentImage){ 
      if(currentImage != indexImage){ 
       $(currentImage).css('z-index',2); 
       clearTimeout(myTimer); 
       $(currentImage).fadeOut(400, function() { 
        myTimer = setTimeout("showNext()", 3500); 
        $(this).css({'display':'none','z-index':1}) 
       }); 
      } 
     } 
     $(indexImage).css({'display':'block', 'opacity':1}); 
     currentImage = indexImage; 
     currentIndex = index; 
     $('#thumbs li').removeClass('active'); 
     $($('#thumbs li')[index]).addClass('active'); 
    } 
} 

function showNext(){ 
    var len = $('#bigPic div').length; 
    var next = currentIndex < (len-1) ? currentIndex + 1 : 0; 
    showImage(next); 
} 

var myTimer; 

$(document).ready(function() { 
    myTimer = setTimeout("showNext()", 3500); 
    showNext(); //loads first image 
    $('#thumbs li').bind('click',function(e){ 
     var count = $(this).attr('rel'); 
     showImage(parseInt(count)-1); 
    }); 
}); 


</script> 
+0

Lightbox Slideshow(http://www.justinbarkhuff.com/lab/lightbox_slideshow/)というjQueryプラグインがあります。このプラグインはこの機能をすべて提供します。あなた自身もこれを学んでいるのは良いことです。しかし、私はそれについてあなたに知らせたいと思っていました。 – JasCav

答えて

0

私はスライドショーを開始するだけでなく、このようなものを停止する機能を作っています。

// must be set to declare that we're using it later. 
var myTimer; 

function startShow(){ 
    myTimer = setTimeout("showNext()", 3500); 
} 
function stopShow(){ 
    clearTimeout(myTimer); 
} 

$(document).ready(function() { 
    startShow(); 
    showNext(); //loads first image 
    $('#thumbs li').bind('click',function(e){ 
     var count = $(this).attr('rel'); 
     showImage(parseInt(count)-1); 
    }); 
    // you're going to want to hide this element initially, until the user pauses the slide show, vice versa. 
    $('#selectorToStartShow').bind('click',function(){ 
    startShow(); 
    }); 
    $('#selectorToPauseShow').bind('click',function(){ 
    stopShow(); 
    }); 
}); 

#thumbs liのクリックで何をしようとしているのか分かりませんが、それはすべきことです。

+0

助けてくれてありがとう。私は非常に近いですが、何らかの理由でストップボタンを2回クリックする必要があります。 – Ben

+0

上記のスニペットを追加したら? –