問題討論區


【JavaScript 語法】文章精華區


【教學】 仿 Yahoo 切換式兩格圖片廣告



仿 Yahoo 切換式兩格圖片廣告
飛肯老師
註冊日期:
2009/2/15 16:27
留言: 106
不知道各位在 Yahoo 新聞 中看新聞消息時,是否有注意到網頁中有用來推薦最新消息用的兩格圖片效果:

Open in new window


每一個都會有 2-N 張圖片內容,除了可透過左右鈕來切換內容之外;右上角也會有小圓點來表示共有幾對內容,點擊小圓點也能立即的切換到該對圖片上。這樣的效果用來當商品展示或是廣告展示都蠻有效果的。所以筆者這次又要教各位如果做一個"山寨版"的囉。

首先就是要準備一下 HTML 的框架:


<body>
    <
div class="showBox">
        <
h2 class="title">最新產~推薦</h2>
        <
div class="roll"></div>
        <
div class="btn">
            <
a href="#" class="prev">Prev</a>
            <
a href="#" class="next">Next</a>
        </
div>
        <
ul class="itemList">
            <
li>
                <
a href="#" class="adContent">
                    <
img src="images/s.gif" alt="" />
                    <
h3>Script - S</h3>
                </
a>
                <
a href="#" class="adContent">
                    <
img src="images/c.gif" alt="" />
                    <
h3>Script - C</h3>
                </
a>
            </
li>
            <
li>
                <
a href="#" class="adContent">
                    <
img src="images/r.gif" alt="" />
                    <
h3>Script - R</h3>
                </
a>
                <
a href="#" class="adContent">
                    <
img src="images/i.gif" alt="" />
                    <
h3>Script - I</h3>
                </
a>
            </
li>
            <
li>
                <
a href="#" class="adContent">
                    <
img src="images/p.gif" alt="" />
                    <
h3>Script - P</h3>
                </
a>
                <
a href="#" class="adContent">
                    <
img src="images/t.gif" alt="" />
                    <
h3>Script - T</h3>
                </
a>
            </
li>
            <
li>
                <
a href="#" class="adContent">
                    <
img src="images/js.gif" alt="" />
                    <
h3>JavaScript</h3>
                </
a>
                <
a href="#" class="adContent">
                    <
img src="images/jq.gif" alt="" />
                    <
h3>jQuery</h3>
                </
a>
            </
li>
        </
ul>
        <
a href="#" class="more">More</a>
    </
div>
</
body>


其中 div.roll 是用來放置小圓點的;而 ul.itemList 中的每一個 li 都是用來顯示內容使用的,其中會再用 a 來切成左右各一塊。接著用 CSS 來排版裝飾一下:


.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 成的畫面了:

Open in new window


嘿~除了不能換上下組內容之外,還缺少了表示幾對的小圓點。這些我們就用 jQuery 來幫我們補上吧:


$(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')>-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 新聞 的切換式兩格圖片廣告效果就完成囉!至於如何讓它能循環切換及自動輪播就留給各位當做功課了。

範例瀏覽:
http://demonstration.abgne.tw/jquery/0026/0026_1.html
http://demonstration.abgne.tw/jquery/0026/0026_2.html


2010/8/13 22:05
 


回覆: 仿 Yahoo 切換式兩格圖片廣告
會員一級
註冊日期:
2010/9/26 12:18
留言: 2
對於我們這些新手來說,真是獲益良多呀~

2010/9/26 12:36
 









[高級搜索]


 

課程首頁】 【最新開課時間表】 【範例教學分享區】 【交流討論區】 【企業包班】 【詢問課程】 【合作提案】 【誠徵講師

 

【飛肯設計學苑】 台北市公園路 30-1 號 5 樓 聯絡電話:(02)2370-1122 / 0925-014-000 信箱:flycan@flycan.com.tw
服務時間:(平日)下午 2 點 ~ 晚上 10 點 / (假日)早上 9 點 ~ 下午 5 點

 

台北市短期補習班立案 第 6631 號

TOP

【 Flycan.com 】 Powered by XOOPS