網路上可以找到很多現成的廣告輪播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擋掉.
留言列表