今天要做的是廣告輪播
以前如果只有java→http://www.webpage.idv.tw/maillist/maillist2/code/01/01.htm
大概是要像這篇文這樣做，然後一個一個語法加，
但現在…
JQery在這方面可是強大到不行~><~
參考網址：
超多範例可以這看→http://malsup.com/jquery/cycle/begin.html
然後這是暫停與重新啟動→http://jquery.malsup.com/cycle/pause.html
最後再參考網路上的一篇(針對滑鼠滑入判定)→http://abgne.tw/jquery/apply-jquery/form-field-mouseover-get-focus-change-bg-color.html
目標：做一個廣告頁面，滑鼠移過去暫停，就這樣…
在head標頭內加
<style type="text/css">
.slideshow { height: 232px; width: 232px; }
.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.3.2/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://jquery.malsup.com/cycle/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.slideshow').cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
speed: 1000
});});
$(function() {
// 當滑鼠移到 .slideshow 上時, 停止播放輪播
$('.slideshow').hover(
function()
{
$('.slideshow').cycle('pause');
},
function()
{
$('.slideshow').cycle('resume');
});
});
</script>
body只有這個...
<body>
<form id="form1" runat="server">
</form>
</body>
</html>
因為圖片要從資料庫拿，所以要另外處理，就變成…
.cs檔內
using System;
using System.Web.UI.WebControls;
using System.Text;
protected void Page_Load(object sender, EventArgs e)
{
Literal l1 = new Literal();
StringBuilder sb = new StringBuilder();
for (int i = 0; i < form1.Controls.Count; i++)
{
sb.Append("<div class=\"slideshow\">");
sb.Append("<img src=" + @"http://jquery.malsup.com/cycle/images/beach1.jpg" + @" width=200 height=200 />");
sb.Append("<img src=" + @"http://jquery.malsup.com/cycle/images/beach2.jpg" + @" width=200 height=200 />");
sb.Append("<img src=" + @"http://jquery.malsup.com/cycle/images/beach3.jpg" + @" width=200 height=200 />");
sb.Append("</div>");
Label1.Text = sb.ToString();
this.Controls.Add(l1);
}
}
超方便，給jquery個GJ!!
沒有留言:
張貼留言