提前幻燈片手動與jQuery

請易 - 第一篇文章！提前幻燈片手動與jQuery

展望修改下面的腳本： http://jonraasch.com/blog/a-simple-jquery-slideshow

愛它的簡單，試圖找到一種方式來增加提前功能

最好的IMG或DIV - 上點擊或鏈接。

有什麼建議嗎？

欣賞的幫助

編輯，下面是腳本，這裏是一個工作版本的鏈接：

link to a live testing page

腳本：

function slideSwitch() { 
var $active = $('#slideshow IMG.active'); 

if ($active.length == 0) $active = $('#slideshow IMG:last'); 

// use this to pull the images in the order they appear in the markup 
var $next = $active.next().length ? $active.next() 
    : $('#slideshow IMG:first'); 

// uncomment the 3 lines below to pull the images in random order 

// var $sibs = $active.siblings(); 
// var rndNum = Math.floor(Math.random() * $sibs.length); 
// var $next = $($sibs[ rndNum ]); 


$active.addClass('last-active'); 

$next.css({opacity: 0.0}) 
    .addClass('active') 
    .animate({opacity: 1.0}, 1000, function() { 
     $active.removeClass('active last-active'); 
    }); 
} 

$(function() { 
setInterval("slideSwitch()", 5000); 

});

風格：

#slideshow { 
position:relative; 
height:350px; 
} 

#slideshow IMG { 
position:absolute; 
top:0; 
left:0; 
z-index:8; 
opacity:0.0; 
} 

#slideshow IMG.active { 
z-index:10; 
opacity:1.0; 
} 

#slideshow IMG.last-active { 
z-index:9; 
}

HTML：

<div id="slideshow"> 
     <img src="image01.jpg" width="262" height="496" border="0" class="active" /> 
     <img src="image02.jpg" width="262" height="496" border="0" /> 
     </div>

來源

2011-09-30 jsheps

我們可以通過改變間隔超時，這給了我們，我們可以隨意重置ID做到這一點。然後，我們可以用一個點擊，甚至手動復位此區間和進步，這反過來又會再次啓動的時間間隔。

使用最簡單的例子上jonraasch.com：

window.slideInterval = null; 

function slideSwitch() { 
    var $active = $('#slideshow IMG.active'); 
    var $next = $active.next();  

    $next.addClass('active'); 

    $active.removeClass('active'); 

    window.slideInterval = setTimeout('slideSwitch()', 5000) 
} 

jQuery(function() { 
    window.slideInterval = setTimeout('slideSwitch()', 5000); 
}); 

$(el).click(function(){ 
    // reset interval 
    clearTimeout(window.slideInterval); 

    // trigger next slide manually 
    slideSwitch(); 
});

編輯

上週末我不得不把一些更多的關注這個的時候，我在製作上的最佳實踐閱讀起來一個jQuery插件。代碼稍微記錄，但所有的一切相當標準，而不是非常複雜，雖然有雜耍與變量:)

如果你使用任何你應該使用這個公平一點。

http://jsfiddle.net/sg3s/RFJMy/214/

順便說一句，你可以刪除分組和蘭特的功能，如果你不想使用它們，啓動，停止，init和運輸，使整個工作。

來源

2011-09-30 20:52:31 sg3s

謝謝sg3s。我用上面的代碼試過了jquery代碼，它不會提前也不會循環播放幻燈片 – jsheps

嘗試對它進行一些基本的調試。你可以看到更多的僞代碼，你沒有發佈你現在使用的代碼（html + images，css，javascript），所以我不能告訴你如何整合它。 – sg3s

易老虎！這是我第一次:)。我使用我正在使用的代碼編輯了我的帖子。也許這將有助於？感謝您試用它！ – jsheps

特定的採樣已經建成的一大進步功能：slideSwitch。該功能被稱爲在setInterval循環推進幻燈片放映。你所需要做的就是將該方法連接到你的按鈕點擊，你應該很好去。

HTML：

<div id="advanceShow">Click to Advance</div>

的JavaScript

$(document).ready(function() { 
    $('#advanceShow').click(function() { 
    slideShow(); 
    }); 
});

來源

2011-09-30 20:44:26 JaredPar

由於賈裏德。我已經嘗試了這種方法，它似乎沒有工作。它可能是幻燈片（）;這是造成一個問題？ – jsheps

@jsheps發生了什麼事？是否出錯，控制檯是否打印任何內容？ – JaredPar

沒有錯誤，似乎沒有做任何事情。也許它錯了？ – jsheps

提前幻燈片手動與jQuery

回答

相關問題