2012年2月8日 星期三

jQuery 教學 – 仿 Yahoo 切換式兩格圖片廣告

不知道各位在 Yahoo 新聞 中看新聞消息時，是否有注意到網頁中有用來推薦最新消息用的兩格圖片效果：
每一個都會有 2-N 張圖片內容，除了可透過左右鈕來切換內容之外；右上角也會有小圓點來表示共有幾對內容，點擊小圓點也能立即的切換到該對圖片上。這樣的效果用來當商品展示或是廣告展示都蠻有效果的。所以筆者這次又要教各位如果做一個"山寨版"的囉。
「jQuery 教學」仿 Yahoo 切換式兩格圖片廣告
首先就是要準備一下 HTML 的框架：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

 
    <div class="showBox">
        <h2 class="title">最新產�~推薦</h2>
        <div class="roll"></div>
        <div class="btn">
            <a class="prev" href="#">Prev</a>
            <a class="next" href="#">Next</a>
        </div>
        <ul class="itemList">
            <li>
                <a class="adContent" href="#">
                    <img alt="" src="images/s.gif">
                    <h3>Script - S</h3>
                </a>
                <a class="adContent" href="#">
                    <img alt="" src="images/c.gif">
                    <h3>Script - C</h3>
                </a>
 
            <li>
                <a class="adContent" href="#">
                    <img alt="" src="images/r.gif">
                    <h3>Script - R</h3>
                </a>
                <a class="adContent" href="#">
                    <img alt="" src="images/i.gif">
                    <h3>Script - I</h3>
                </a>
 
            <li>
                <a class="adContent" href="#">
                    <img alt="" src="images/p.gif">
                    <h3>Script - P</h3>
                </a>
                <a class="adContent" href="#">
                    <img alt="" src="images/t.gif">
                    <h3>Script - T</h3>
                </a>
 
            <li>
                <a class="adContent" href="#">
                    <img alt="" src="images/js.gif">
                    <h3>JavaScript</h3>
                </a>
                <a class="adContent" href="#">
                    <img alt="" src="images/jq.gif">
                    <h3>jQuery</h3>
                </a>
 
        </li></ul>
        <a class="more" href="#">More</a>
    </div>
其中 div.roll 是用來放置小圓點的；而 ul.itemList 中的每一個 li 都是用來顯示內容使用的，其中會再用 a 來切成左右各一塊。接著用 CSS 來排版裝飾一下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

.showBox {
    width: 290px;
    height: 220px;
    border: 1px solid black;
    position: relative;
    overflow: hidden;
    font-family: Arial;
    letter-spacing: 1px;
}
.showBox * {
    margin: 0;
    padding: 0;
}
.showBox a {
    color: blue;
    text-decoration: none;
}
.showBox h2.title {
    position: absolute;
    top: 10px;
    left: 5px;
    font-size: 16px;
}
.showBox .roll {
    position: absolute;
    top: 16px;
    right: 80px;
    }
.showBox .roll a {
    float: left;
    width: 7px;
    height: 7px;
    margin-right: 3px;
    text-indent: -9999px;
    background: url(images/dot.gif) no-repeat 0 0;
}
.showBox .roll a.on {
    background-position: 0 -27px;
}
.showBox .btn {
    position: absolute;
    top: 10px;
    right: 5px;
    height: 20px;
}
.showBox .btn a {
    width: 31px;
    height: 24px;
    float: left;
    text-indent: -9999px;
}
.showBox .btn a.prev {
    background: url(images/btn.gif) no-repeat 0 -42px;
}
.showBox .btn a.next {
    background: url(images/btn.gif) no-repeat 0 0;
}
.showBox a.more {
    position: absolute;
    bottom: 10px;
    right: 5px;
    padding-left: 7px;
    font-size: 12px;
    background: url(images/more.gif) no-repeat -1px 5px;
}
.showBox ul.itemList, .showBox ul.itemList li {
    list-style: none;
}
.showBox ul.itemList {
    position: absolute;
    top: 40px;
    white-space: nowrap;
}
.showBox ul.itemList li {
    display: inline;
}
.showBox ul.itemList li .adContent {
    display: inline-block;
    width: 135px;
    margin: 0 5px;
}
.showBox ul.itemList li .adContent h3 {
    text-align: center;
    font-weight: normal;
    font-size: 12px;
}
.showBox ul.itemList li .adContent img {
    border: 1px solid #ccc;
    padding: 5px;
}
不要看到 CSS 落落長就覺得它很難，其這邊比較麻煩的只是如何讓 ul.itemList 水平排列時不換行而已。若順利的話就能看到相似度達 9 成的畫面了：
嘿~除了不能換上下組內容之外，還缺少了表示幾對的小圓點。這些我們就用 jQuery 來幫我們補上吧：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

$(function(){
    $('.showBox').each(function(){
        // 先取得必要的元素並用 jQuery 包裝
        // 再來取的 .showBox 的寬及設定移動速度
        var $showBox = $(this),
        $itemList = $showBox.find('ul.itemList'),
        $items = $itemList.find('li'),
        $adContent = $items.find('.adContent'),
        width = $showBox.width(),
        speed = 400;
 
        // 針對不支援 cssFloat 或 IE 瀏覽器
        // 減回 $adContent 的 margin-left 及 margin_right
        if(!$.support.cssFloat || $.browser.msie){
            width -= _margin;
        }
 
        // 產生小圓點
        var rollStr = '';
        $items.each(function(i, ele){
            rollStr += '<a href="#">'+i+'</a>rn';
        });
 
        // 加入小圓點並加上 click 事件
        $showBox.find('.roll').html(rollStr).find('a').click(function(){
            move($(this).index());
        }).eq(0).addClass('on');
 
        // 當點擊左右鈕時
        $showBox.find('.prev, .next').click(function(){
            // 找出目前是顯示那一組
            var no = $showBox.find('.roll a.on').index();
            // 判斷接下來要移往那一組
            no = ($(this).attr('className').indexOf('prev')&gt;-1 ? (no - 1 + $items.length) : (no + 1))  % $items.length;
            // 進行移動
            move(no);
 
            return false;
        });
 
        // 控制移動的函式
        function move(no){
            $itemList.stop().animate({
                left: width * no * -1
            }, speed);
            $showBox.find('.roll a').eq(no).addClass('on').siblings().removeClass('on');
        }
    });
 
    $('a').focus(function(){
        this.blur();
    });
});
將將~這樣一個仿 Yahoo 新聞 的切換式兩格圖片廣告效果就完成囉！至於如何讓它能循環切換及自動輪播就留給各位當做功課了。
張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)