2013-03-11 170 views
-1

所以我有這個問題。我有一個幻燈片頁面,它不會自己滑動,我希望它們能夠滑動。下面是代碼http://jsfiddle.net/tUUPN/3/如何讓幻燈片自行滑動?

$(document).ready(function() { 
$("#slideshow").css("overflow", "hidden"); 
$("#slideshow-nav").css("visibility", "visible"); 
$("#slideshow-nav a[href=#farm1]").addClass("active"); 

$("#slideshow-nav").localScroll({ 
    target: '#slideshow', 
    axis: 'x' 
}); 

$("#slideshow-nav a").click(function() { 
    $("#slideshow-nav a").removeClass("active"); 
    $(this).addClass("active"); 
}); 

}); 

編輯

我更新jsfidde http://jsfiddle.net/tUUPN/10/

+1

由於各種原因,您的小提琴似乎失敗了,至少有兩個原因是您沒有包含jQuery或localScroll插件。 – j08691 2013-03-11 17:13:31

+0

包含jquery.localscroll.js和jquery.scrollTo.js。當我創建它時,該示例沒有包含自動滑動功能。我想將它添加到我的代碼中,但問題是我不知道如何 – 2013-03-11 17:17:58

回答

0

(在左邊外部資源選項卡包括jQuery的文件),我會建議使用jQuery's Animate() method產生滑動效果。您可以閱讀相同頁面上的API和示例。

您仍然可以應用您的點擊功能等,但您在移動/滑動物體時確實需要動畫作爲選擇的武器。

0

創建一個方法轉到下一張幻燈片,然後在setInterval中調用該方法。毫秒數決定了它觸發的頻率。如果你想停止,使用clearInterval。