js 網頁開發

jQuery教學-jQuery版的Yahoo!廣告輪播系統

2009/05/13

  最近好友男丁總算開課,身為好友的梅干,當然也要去捧場一下囉!雖然目前已上了二堂課,對於屬猴的梅干,便手癢看到奇摩的3C廣告輪播區塊,感到很有新鮮感,再加上第二堂教了一選擇器,跟點了切換影像的東東,感覺跟奇摩這一個東東好像,所以花了半天時候,把課堂上學的東湊湊、西拼拼,好感動!梅干總算也會jQuery了,梅干就獻醜啦!而梅干的作法跟奇摩有點不同,梅干則是直接利用動態換圖片與文字,有興趣的朋友,可以看看囉!如有bug的地方,也請各位多多包涵啦!


放在<head>…..</head>之間:
<script language=“javascript” src=“jquery-1.3.2.js” ></script>
<script language=“javascript”>
$(function(){
    var timer;
    var i = -1;
    var speed = 5000;//停留秒數
    var alpha=0.7;//說明文底的透明度0~1
    var myItembox = $(“#ItemBox ul li a”);

$("#showinfo").html($("#ItemBox ul li a").attr("rel"));
$("#showinfobg").css("opacity",alpha);

myItembox.click(function(){     
    var imgfile=$(this).attr("data");
    var imginfo=$(this).attr("rel");
    $("#showimg").attr("src",imgfile);
    $("#showinfo").html(imginfo);
    i = myItembox.index($(this));

    $("#ItemBox ul li").removeClass("on");//remove      
    $(this).parent().addClass("on");//add       

    return false;   
}).hover(function(){//滑入時停止輪播
    clearTimeout(timer);
}, function(){
    timer = setTimeout(autoShow, speed);
});

//滑入時停止輪播
$("#ShowBox").hover(function(){
    clearTimeout(timer);
}, function(){
    timer = setTimeout(autoShow, speed);
});

//自動輪播函數
function autoShow(){
    myItembox.eq(i).css("opacity", alpha);
    if(i+1&lt;myItembox.length){
        i++;
    }else{
        i=0;
    }
    myItembox.eq(i).click();
    myItembox.removeClass("on");
    myItembox.eq(i).parent().addClass("on");
    timer = setTimeout(autoShow, speed);
}
//啟動自動輪播
autoShow();

}); </script> <link href=“reset.css” rel=“stylesheet” type=“text/css” /> <style type=“text/css”> a{ outline: none; /* for Firefox / hlbr:expression(this.onFocus=this.blur()); / for IE */} #TopDocBox{width:627px; background-color:#000;padding:5px;} #ItemBox{width:196px;float:left;} #ItemBox ul {white-space: nowrap;} #ItemBox ul li{ background:url(bg_tit.png) no-repeat left -69px; height:46px; padding:5px 7px; border-bottom:solid 1px #FFFFFF; } #ItemBox ul li a{color:#333; line-height:46px;} #ItemBox ul li.on{background-position:left -126px;} #ItemBox ul li.on a{ color:#fff; width:152px; display: inline-block; overflow:hidden;}

#ShowBox{ position:relative; float:left; width:430px; height:285px; background-color:#333333; overflow:hidden; } #showinfobg{ position:absolute; z-index:1; bottom:-1px; height:85px; background-color:#000; } #showinfo{ position:absolute; z-index:10; bottom:0;
color:#fff; height:70px; padding:10px; } #showinfo b{font-weight:bold;font-size:16px;} #showinfo a{color:#fff; text-decoration:underline;} #showinfo a:hover{color:#fff; text-decoration:none;} </style>


放在<body>…..</body>之間:
<div id=“TopDocBox”>
    <div id=“ItemBox”>
        <ul>
            <li class=“on”><a href=“#” data=“img/show00.jpg” rel=”<b>Canon在台推出新一代數位印刷產品及大尺寸印表機</b> <br>全球光學影像大廠Canon,是全球唯一同時具有輸出及輸入影像產品的大廠,不但數位相機產品在台灣市場活躍…<a href="#">(詳全文)</a>“>Canon在台推出新一代數位印</a></li>
            <li><a href=“#” data=“img/show01.jpg” rel=”<b>做個新好男人 LG晶鑽緹花滾筒洗衣機「蒸」</b><br>健康上根據小兒科主任醫師潘俊伸醫生指出,根據調查,室塵螨有70-80%是藏在臥室的床墊、棉被及枕頭中,還有20-…<a href="#">(詳全文)</a>“>做個新好男人 LG晶鑽緹花滾</a></li>
            <li><a href=“#” data=“img/show02.jpg” rel=”<b>精品之姿搶市 Asus S121</b><br>閃亮亮實測還沉浸在Asus S121的瑰麗外型上,沒錯!小編也是。不過,若要掏出錢來敗家,仍舊得恢復理智進行評量,這…<a href="#">(詳全文)</a>“>精品之姿搶市 Asus S121閃</a></li>
            <li><a href=“#” data=“img/show03.jpg” rel=”<b>「金」閃耀 王建民限量滑蓋機</b><br>開賣雖然旅美球星王建民近來表現失常,但是台灣廠商仍舊很力挺,繼代言筆電、乳品後,又有最新力作出爐,全…<a href="#">(詳全文)</a>“>「金」閃耀 王建民限量滑蓋</a></li>
            <li><a href=“#” data=“img/show04.jpg” rel=”<b>講中文的Android手機</b><br> 五月正式在台開賣盼了好久!全球首款中文化介面的Android手機「HT..<a href="#">(詳全文)</a>“>講中文的Android手</a></li>
        </ul>
    </div>
    <div id=“ShowBox”>
         <div id=“showinfo”></div>
         <div id=“showinfobg”></div>
         <img src=“img/show00.jpg” id=“showimg”/>
    </div>
</div>

[範例預覽] [範例下載]