2013-06-19 35 views
4

我正在使用新的slideJS V3.0,但似乎無法通過單擊導航來暫停幻燈片動畫。我看到有人說他們使用分頁工作,所以我嘗試使用它,沒有用。任何幫助是極大的讚賞!jQuery SlidesJS - 單擊導航後無法重新開始動畫

這裏是我正在使用的代碼(目前正在設法只是讓它即使拼版作業)

<script> 

$(function() { 

    $('#slides').slidesjs({ 

    width: 905, 
    height: 310, 
    navigation: false, 
    play: { 
    auto: true, 
    pauseOnHover: true, 
    effect: 'fade', 
    restartDelay: 1500 
    }, 
    pagination: { 
    effect: 'fade', 
    play: {   
     restartDelay: 1500 
    } 
    }, 
    effect: { 
    fade: { 
     speed: 1500 
    },  
    crossfade: true 
    } 

    }); 
}); 

</script> 

回答

6

這可以在不修改插件的情況下完成(使用SlideJS 3.0)。 只需添加在你的選擇以下完整的回調:

$('#slides').slidesjs({ 
    callback: { 
     complete: function(number) { 
      var pluginInstance = $('#slides').data('plugin_slidesjs'); 

      setTimeout(function() { 
       pluginInstance.play(true); 
      }, pluginInstance.options.play.interval); 
     } 
    } 
}); 
+0

我剛纔看到了這個,不幸的是我們不得不採用另一種解決方案,但我希望我早些時候嘗試過。非常感謝! –

0

今天我同樣的問題。

這裏是如何解決這個問題:在jquery.sldes.js文件轉到行184和改變它是這樣

return _this.goto(($(e.currentTarget).attr("data-slidesjs-item") * 1) + 1) && _this.play(); 

希望這對你的作品。

+0

我試過這個,但是如果你點擊活動幻燈片,它不會重新開始動畫,但是如果你點擊任何其他幻燈片,確定。你知道如何修復同一張幻燈片上的點擊嗎? – suicidebilly

1

在你jquery.slides.js文件做_this.stop(真)搜索;

它顯示了約3-4倍,未來&以前點擊..,你也將看到它顯示了paginationLink.click

我有問題是滑塊是停止滑動後,單擊上一頁,下一頁或分頁。我需要滑塊重啓..所以我所做的就是添加一個setTimeout的發揮()

_this.stop(true); 

setTimeout(function() 
{ _this.play(true) }, 3000); 
0

DEMO:http://jsbin.com/cujeqekate
舊版本或新版本:

$(function($) { 
 
    var interval = 4000; 
 
    var st = 0; 
 
    var $slides = $('#slides'); 
 
    $slides.slidesjs({ 
 
    width: 800, 
 
    height: 450, 
 
    play: { 
 
     active: true, 
 
     auto: true, 
 
     interval: interval, 
 
     swap: true, 
 
     pauseOnHover: true 
 
    }, 
 
    callback: { 
 
     start: function(number){ 
 
     if ($slides.find('.slidesjs-play').is(':visible')) { 
 
      clearTimeout(st); 
 
      st = setTimeout(function() { 
 
      $slides.find('.slidesjs-play').click(); 
 
      }, interval); 
 
     } 
 
     } 
 
    } 
 
    }); 
 
});