網路上可以找到很多現成的廣告輪播Plig-in或是教學可以拿來學習與套用
EX
http://abgne.tw/tag/jquery-ad 這個站有很多的範例跟教學CSS
https://cube3x.com/30-free-jquery-slider-plugins/ (30 Free jQuery Slider Plugins)
http://www.tripwiremagazine.com/2013/08/jquery-slider.html (55+ Awesome jQuery Slider Plugins)
不過當前端工程師很厲害時，有時對他們來講直接寫一個會比較快點一點，因為客戶跟設計師討論出來，進而設計的視覺效果，常常會跟網路上找現有的有些許不同．與其改，直接做更省工時，還比較好維護．
這裡的廣告輪播是可以讓使用者後台上稿用的，所以先會從資料庫去讀取該撥放的廣告相關資料．
例如圖片，外部連結，秒數等．
所以我先們設計一個Model
1: public class Advertise
2: { 3: [IdentityField]4: public int Id { get; set; }
5: public string GUID { get; set; }
6: 7: [Display(Name = "標題")]
8: public string Title { get; set; }
9: 10: [Display(Name = "顯示秒數")]
11: public int Second { get; set; }
12: 13: [Display(Name = "連結")]
14: public string Url { get; set; }
15: 16: [Display(Name = "開啟方式")]
17: public string Target { get; set; }
18: 19: [Display(Name = "圖檔")]
20: public string Thumb { get; set; }
21: }就大概幾個重點欄位，Controller再呼叫Serivce層，針對不同的邏輯撈出要被呈現的廣告資料回來．
IEnumerable<Advertise>adv = new AdvertiseSerice().GetAdvertiseList("some condtion");
通常前台的網頁會有很多的不同Model，理想的方式是設計一個ViewModel整合後再一併送到View
public class ViewModel
{
public IEnumerable<Advertise> advs { get; set; };
// …..
｝…
以下是View的內容
1: <!--廣告輪播-->2: <div class="switch-index">
3: 4: <div class="switch-pic">
5: 6: @{7: int adcount = 0;
8: foreach (var ad in ViewModel.advs)
9: {10: <a href="@ad.Url" target="@ad.Target" data-guid="@ad.GUID">
11: <img src="~/advfiles/@ad.Thumb" alt="@ad.Title" />
12: </a> 13: 14: adcount++; 15: } 16: } 17: </div>18: <div class="switch-btn">
19: @{int x = 1;
20: int c = 0;
21: foreach (var ad in ViewModel.advs )
22: {23: if( c < adcount)
24: {25: <a stay-time="@ad.Second" class="@(c==0? "chose" : "")" href="javascript:void(0)"></a>
26: x++; 27: c++; 28: }29: else { }
30: } 31: } 32: 33: </div>第一個迴圈組成有哪些圖片，第二層迴圈組成上面可點選的紅點
CSS如下
1: .switch-index { width: 982px; height: 314px; overflow: hidden; margin: 0 auto; position: relative; }
2: .switch-index .switch-btn { z-index: 99; bottom: 25px; position: relative; text-align: center; }
3: .switch-index .switch-btn a { margin: 0 2px; width: 10px; height: 10px; display: inline-block; -webkit-border-radius: 5px; border-radius: 5px; background-color: #FFf; border-width: 1px; border-style: solid; border-color: #CECFD0; }
4: .switch-index .switch-btn a.chose { background-color: #E21F23; border-color: #E21F23; }
5: .switch-index .switch-pic { width: 100%; height:314px; }
6: .switch-index .switch-pic a { visibility: hidden; display: block; position: absolute; z-index: 0; }
7: .switch-index .switch-pic a.nowshow { z-index: 1; }
8: .switch-index .switch-pic a.nowhide { z-index: 2; }
9: .switch-index .borderRadius { z-index: 1; width: 100%; height: 7px; position: absolute; bottom: 0; background: url(../../images/switch-botmask.png) no-repeat; }
10: 11: .switch { position: relative; width: 740px; height: 175px; overflow: hidden; border-bottom: 2px solid #e21f23; }
12: .switch .title { position: absolute; z-index: 3; bottom: 0; width: 166px; height: 33px; background: url(../../images/switch-title-bg.png); font-size: 22px; font-weight: bold; line-height: 33px; padding-left: 70px; color: #FFF; }
13: .switch .switch-pic { width: 100%; height: 175px; }
14: .switch .switch-pic a { visibility: hidden; display: block; position: absolute; z-index: 0;}
15: .switch .switch-btn { z-index: 99; bottom: 25px; position: relative; text-align: center; }
16: .switch .switch-btn a { margin: 0 2px; width: 10px; height: 10px; display: inline-block; -webkit-border-radius: 5px; border-radius: 5px; background-color: #FFf; border-width: 1px; border-style: solid; border-color: #CECFD0; }
17: .switch .switch-btn a.chose { background-color: #E21F23; border-color: #E21F23; }
18: .switch .switch-pic a.nowshow { z-index: 2; }
19: .switch .switch-pic a.nowhide { z-index: 3; }
js如下
1: $(document).ready(function(){2: //廣告切換
3: var t,4: itemLength = $(".switch-btn a").length,
5: speed = 1; 6: 7: $(".switch-pic").find("a").eq(0).addClass('nowshow');
8: 9: function staytimeMove(order) { 10: clearTimeout(t);11: var staytime = parseInt($(".switch-btn a").eq(order).attr("stay-time"));
12: if (order == itemLength - 1) {
13: t = setTimeout(function () { 14: picMove(0); 15: staytimeMove(0); 16: }, staytime * 1000);17: } else {
18: t = setTimeout(function () { 19: picMove(order + 1); 20: staytimeMove(order + 1); 21: }, staytime * 1000); 22: }; 23: }; 24: 25: $(document).ready(function () {26: $(".switch-pic a").css("visibility", "visible");
27: staytimeMove(0); 28: }); 29: 30: 31: function picMove(nextorder){ 32: switchNow(nextorder);33: var target = $(".switch-pic").find("a"),
34: nowshow = $(".switch-pic").find("a.nowshow");
35: 36: nowshow.removeClass('nowshow').addClass('nowhide').fadeOut(function(){
37: $(this).removeClass('nowhide').show();
38: });39: target.eq(nextorder).addClass('nowshow');
40: } 41: 42: function switchNow(index) {43: $(".switch-btn a").removeClass('chose');
44: $(".switch-btn a").eq(index).addClass('chose');
45: }46: $(".switch-btn a").on('click', function () {
47: var n = parseInt($(this).attr('class').substring(4)) - 1;
48: picMove(n); 49: }); 50: 51: 52: $(".switch-index,.switch").on('mouseover', function () {
53: clearTimeout(t); 54: }); 55: 56: $(".switch-index,.switch").on('mouseleave', function () {
57: var n = parseInt($(".switch-btn a.chose").attr('class').substring(4)) - 1;
58: setTimeout(function () { 59: staytimeMove(n); 60: }, speed * 1000); 61: }); 62: 63: }); 這樣就組成一個簡單的廣告輪播了．要注意一點就是css class 名稱或是一些html attribute如果有ad開頭字眼的
會被chrome的ADBlock Pliuing擋掉．
文章標籤
全站熱搜
