2010-04-16 113 views

回答

0
<!doctype html> 
<html> 
<head> 
<title>JQuery Cycle Plugin - Example Slideshow</title> 
<style type="text/css"> 
.slideshow { height: 232px; width: 232px; margin: auto } 
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; } 
</style> 
<!-- include jQuery library --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 

<!-- include Cycle plugin --> 
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script> 

<!-- initialize the slideshow when the DOM is ready --> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('.slideshow').cycle({ 
     fx: 'shuffle' // choose your transition type, ex: fade, scrollUp, shuffle, etc... 
    }); 
}); 
</script> 
</head> 
<body> 
    <div class="slideshow"> 
     <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" /> 
     <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" /> 
     <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" /> 
    </div> 
</body> 
</html> 

這是exacly我想要的,但我希望它與標籤,而不是圖像工作......我可以修改它的工作?

+0

是的,看到我的修改答案。 – 2010-04-16 22:24:11

0

退房的scrollTop的()函數...

http://api.jquery.com/scrollTop/

+0

http://demo.webdesignbooth.com/content-slider/ 即時尋找類似的東西,但沒有點擊標籤,我希望它是自動 – vick 2010-04-16 21:54:03

1

基於演示的鏈接您的評論,你可能想的週期插件,則:http://jquery.malsup.com/cycle/

是的,它會使用任何標籤,而不僅僅是圖像。如果您通過幾個<div>標籤要循環可以做些像這樣:

<div class="slideshow"> 
    <div>Test 1</div> 
    <div>Test 2</div> 
    <div>Test 3</div> 
</div> 

它會通過幻燈片類中的任何標籤週期。

0
var scrolling = window.setInterval("autoScroll()", 5000); 

function autoScroll(elem) { 

    $(function() { 
     $('div#mycontainer').animate({ scrollTop: '+=' + 40 }); 
    }); 

}