制作时间：15:30 - 18:00
抛弃之前测试用的三个方框，正式制作漂亮的界面。测试环境只是用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>
最终要实现的页面是这样的：
Paste_Image.png
为这几张图片添加红色标注，便于理解。根据规律，第3张图的两边其实是对称的，大小啊，透明度啊，层级关系啊都是一样的。
那我来一步一步添加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.图片位置和层级设置
#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.图片大小和宽度设置
#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代码结束
js开始
过程：获取元素的对象 -> 数组切换 -> 元素属性重新赋值。
跟第一版不同的地方：
1. 更改的属性变多了。
2. 因为向前和向后按钮实现的功能差不多，所以可以调用同一个函数，只是参数不同。
代码如下：
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即可。
其实还可以添加一些效果，比如可以设定成自动轮播的，鼠标移到图上时暂停自动轮播等其他你能想得到的效果。那今天这个效果就做到这里了。
不积跬步无以至千里
