2012-03-20 68 views
0

我需要製作幻燈片,每週必須更換圖片。我可以使用循環插件,每週更換圖像嗎?

我有一個PHP腳本,讀取數據庫,其中是圖像和標題和標題的名稱,並創建div併發送到頁面的HTML。

我的問題是,我不知道如何在由php創建的div中使用循環插件。

謝謝你的時間。

+0

請點擊旁邊的箭頭問題如果它幫助你。 – lucuma 2012-05-17 22:54:22

回答

0

這jquery循環插件有很多的例子,很容易。您將任何內容放置在div(或其他html元素)中,並且內部的項目得到循環。

您可以查看該網站,擁有所有的信息,你需要: http://jquery.malsup.com/cycle/

這裏是他們的超級基本演示http://jquery.malsup.com/cycle/basic.html採取了一個例子:

<!DOCTYPE html> 
<html> 
<head> 
<title>JQuery Cycle Plugin - Basic Demo</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.5/jquery.min.js"></script> 
<!-- include Cycle plugin --> 
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('.slideshow').cycle({ 
     fx: 'fade' // 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" /> 
     <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" /> 
     <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" /> 
    </div> 
</body> 
</html> 
相關問題