還有一點就是包括濾鏡的使用但是有一點必須要說明的是濾鏡在firefox下不能識別看不到效果，
下面就開始我們的代碼編寫吧
html是比較簡單的
代碼
代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<TITLE>myjquerydirection</TITLE>
<META http-equiv=content-type content="text/html; charset=gb2312">
<link rel="stylesheet" type="text/css" href="css/dirction.css">
<script language=javascript src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="js/drection.js"></script>
</head>
<body>
<div id=nav>
<ul>
<li><img src="images/02.jpg" text="美景如畫的海景|天藍海藍" pic="2">
<div>一個海島</div></li>
<li><img src="images/01.jpg" text="Handy Code|春華秋實" pic="1">
<div>一片麥穗</div></li>
<li><img src="images/03.jpg" text="郁郁蔥蔥的生命|生生不息的生命" pic="3">
<div>一樹 </div></li>
<li><img src="images/04.jpg" text="孤獨的一棵老樹|等誰呢？" pic="4">
<div>一棵大樹</div></li>
<li><img src="images/05.jpg" text="明媚的向日葵花|生生不息的生命" pic="5">
<div>一地葵花</div></li></ul>
<div id=frontTextBack></div>
<div id=frontText></div>
<div id=frontTextSub></div>
<div id=BG></div>
<div id=mask></div>
<div id=back><img height="240" src="images/2.jpg" width="760"</div>
</div>
</body>
</html>
這裡有多個div標簽 id=frontTextBack的標簽是顯示通過css濾鏡來實現陰影，其他的代碼就沒有什麼好說的了
現在開始我們的css代碼的編寫了
首先從頂層開始編寫
代碼
代碼如下:
body { padding:0;
moz-user-select: none;
margin:0;
}
#nav { background: url("loadsmall.gif") no-repeat scroll 330px 100px #000;
height:240px;
overflow:hidden;
position:relative;
width:760px;
display:block;
}
#nav ul { bottom:0px;
left:3px;
position:absolute;
text-align:left;
z-index:999;
}
#nav ul li { list-style:none;
display:block;
float:left;
height:50px;
width:140px;
font-size:12px;
position:relative;
}
#nav li img{ border:1px solid white;
cursor:pointer;
float:left;
height:35px;
left:10px;
top:5px;
width:52px;
margin-top:10px;
}
#nav li div{ FILTER: alpha(opacity=60);
margin-left:70px;
margin-top:5px;
padding-left:10px;
color:white;
}
#frontTextBack{color:#000;
font-family:Verdana;
font-size:30px;
left:22px;
position:absolute;
width:100%;
top:22px;
}
#frontText { color:#fff;
font-size:30px;
font-weight:900;
left:20px;
position:absolute;
top:20px;
width:100%;
z-index:999;
}
#frontTextSub{color:#fff;
font-size:13px;
left:25px;
position:absolute;
top:60px;
width:100%;
}
#BG { background:none repeat scroll 0 0 #000;
border-top:1px solid #999;
bottom:0;
height:50px;
position:absolute;
text-align:right;
width:100%;
}
#mask { background:repeat scroll 0 0 transparent;
height:100%;
position:absolute;
width:100%;
z-index:990;
}
#back { text-align:center;
}
.gray {FILTER:gray(); } //濾鏡設置成灰
接下來就是js的編寫了js
代碼
首先加載
代碼如下:
$(function(){
//首先找到需要點擊的img
$("li img").click(function(){
//判斷一下當前img是否已經被點中
if(this.className.indexOf("active") !=-1)
{
return;
}
//獲取數據
var i=$(this).attr("pic");
//獲取要顯示的文本內容,並以|把text分割成數組
var t=$(this).attr("text").split("|");
//改變文本的淡出,通過控制透明度來改變動畫的效果
$("#frontText").fadeOut();
$("#frontTextBack").fadeOut();
$("#frontTextSub").fadeOut();
//處理當前active的img恢復原樣
$("li img.active").animate({top:5,width:52,left:10},300)
.removeClass("active")
.fadeTo(200,0.6)
//處理當前的active的img
$(this).animate({top:-5,width:40,height:70,left:1},300)
.addClass("active")
.fadeTo(200,1)
//處理顯示的div的大圖
$("#back").children().addClass("gray").end()
.fadeIn(500,0.1,function(){
$(this).children("img").attr("src","imgaes/"+i+".jpg").removeClass("gray");
$(this).fadeTo(500,1,function(){
$("#frontText").html(t[0]).fadeIn(200); //更改正文文字
$("#frontTextBack").html(t[0]).fadeIn(200); //陰影文字
$("#frontTextSub").html(t[1]).fadeIn(200)} //副標題
);
});
});
});
//初始化第一張圖
var i =0;
show();
function show(){
if (i==$("li img").size()) i = 0
$("li img").eq(i).click();
i++;
//setTimeout(show(),1000);
}