Javascript, 網頁設計

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

[範例預覽] [範例下載]
UAG軍規iPhone防摔殼