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

<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>

<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>