制作時間：15:30 - 18:00
拋棄之前測試用的三個方框刚盈，正式制作漂亮的界面胎许。測試環(huán)境只是用Chrome找前，所以瀏覽器兼容性還沒有考慮到丈屹。
html代碼：
<div id="lunbo">
<ul id="pic_list">
<li class="pos_0"><img src="./images/8.jpg"></li>
<li class="pos_1"><img src="./images/1.jpg"></li>
<li class="pos_2"><img src="./images/2.jpg"></li>
<li class="pos_3"><img src="./images/3.jpg"></li>
<li class="pos_4"><img src="./images/4.jpg"></li>
<li class="pos_5"><img src="./images/5.jpg"></li>
<li class="pos_6"><img src="./images/6.jpg"></li>
<li class="pos_6"><img src="./images/7.jpg"></li>
</ul>
<a href="javascript:;" class="btn prev">
<span class="icon"></span>
</a>
<a href="javascript:;" class="btn next">
<span class="icon"></span>
</a>
</div>
最終要實現(xiàn)的頁面是這樣的：
Paste_Image.png
為這幾張圖片添加紅色標注调俘，便于理解。根據(jù)規(guī)律旺垒，第3張圖的兩邊其實是對稱的脉漏，大小啊，透明度啊袖牙，層級關(guān)系啊都是一樣的。
那我來一步一步添加css代碼舅锄。
首先添加基本的 css 代碼：
@charset "UTF-8";
body,h1,h2,h3,p,ul,img,a {margin:0;padding:0;}
body{background:#FFFFFF url(../images/hxd_bg.gif) repeat-x;}
ul{ list-style: none; }
a{ text-decoration:none; }
img{ border: none; }
#lunbo{
width:970px;
height: 344px;
margin: 98px auto 0;
position: relative;
}
#lunbo ul{ width: 970px; height: 344px;position:absolute;left:0;top:0; }
接下來的每一步是：
- 修改圖片透明度
#lunbo .pos_0 img, #lunbo .pos_6 img{ opacity: 0; }
#lunbo .pos_1 img, #lunbo .pos_5 img{ opacity: 0.6; }
#lunbo .pos_2 img, #lunbo .pos_4 img{ opacity: 0.8; }
2.圖片位置和層級設(shè)置
#lunbo ul li{ position: absolute; }
#lunbo ul .pos_0 { left:0; top: -104px; z-index: 1; }
#lunbo ul .pos_6 { right:0; top: -104px; z-index: 1; }
#lunbo ul .pos_1 { left:0; top:92px; z-index:2; }
#lunbo ul .pos_5 { right:0; top:92px; z-index:2; }
#lunbo ul .pos_2 { left:48px; top:40px; z-index:3; }
#lunbo ul .pos_4 { right:48px; top:40px; z-index:3; }
#lunbo ul .pos_3 { left:140px; top:0; z-index:4; }
3.圖片大小和寬度設(shè)置
#lunbo .pos_3 img {width:680px;}
#lunbo .pos_2 img, #lunbo .pos_4 img {width:510px;}
#lunbo .pos_1 img, #lunbo .pos_5 img, #lunbo .pos_6 img {width:270px;}
#lunbo .pos_0 img {width:100px;}
4.向前向后按鈕
#lunbo a.btn {width:120px;height:110px;position:absolute;z-index:5;cursor:pointer;}
#lunbo a.prev{left:72px;top:108px;}
#lunbo a.next{right:81px;top:108px;}
#lunbo a.btn span{width:76px;height:110px;position:absolute;}
#lunbo a.prev .icon{left:0;top:0;background:url(../images/hxd_btn_1.png) no-repeat left top;}
#lunbo a.next .icon{right:0;top:0;background:url(../images/hxd_btn_1.png) no-repeat left bottom;}
css代碼結(jié)束
js開始
過程：獲取元素的對象 -> 數(shù)組切換 -> 元素屬性重新賦值鞭达。
跟第一版不同的地方：
1. 更改的屬性變多了。
2. 因為向前和向后按鈕實現(xiàn)的功能差不多皇忿，所以可以調(diào)用同一個函數(shù)畴蹭，只是參數(shù)不同。
代碼如下：
var $oDiv = $("#lunbo");
var $oUl = $("ul");
var $aLi = $("li");
var $aLnk = $("ul a");
var $aImg = $("img");
var $oPrevBtn = $("a.prev");
var $oNextBtn = $("a.next");
var $oPrevIcon = $(".prev.icon");
var $oNextIcon = $(".next.icon");
var arr = [];
for(var i=0; i < $aLi.length; i++){
var $inow = $aLi.eq(i);
var iPos = $inow.position();
var iLeft = iPos.left;
var iTop = iPos.top;
var iZindex = $inow.css("z-index");
var iOpacity = $aImg.eq(i).css("opacity")*100;
var iWidth = parseInt($aImg.eq(i).css("width"));
arr.push([iPos, iLeft, iTop, iZindex, iOpacity, iWidth]);
}
$oPrevBtn.click(function(){
imgSwitch(true);
});
$oNextBtn.click(function(){
imgSwitch(false);
});
function imgSwitch(isPrev){
if(isPrev){
arr.push(arr.shift());
}else{
arr.unshift(arr.pop());
}
for(var i=0; i < $aLi.length; i++){
var $inow = $aLi.eq(i);
$inow.css("z-index",arr[i][3]);
$inow.animate( { "left":arr[i][1], "top":arr[i][2] } );
$aImg.eq(i).animate({"opacity":arr[i][4]/100,"width":arr[i][5]});
}
}
})
注意：animate對opacity屬性作動畫鳍烁，值的范圍得是0-100叨襟，所以
css("opacity")通過取值后要*100。最后賦值的時候再/ 100即可幔荒。
其實還可以添加一些效果糊闽，比如可以設(shè)定成自動輪播的梳玫，鼠標移到圖上時暫停自動輪播等其他你能想得到的效果。那今天這個效果就做到這里了右犹。
不積跬步無以至千里
