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>

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