轮播特效

图片轮播对于网民来说是司空见惯的事。实现轮播的方法多种多样。这里用jquery给大家介绍一种轮播。思路是这样的：有三张图片，给三张图片设置绝对定位，并分别赋予三个层次（用到的属性为：position：absolute和z-index:i(i=1,2,3)）.通过jQuery来控制图片所在层次，即可实现轮播。代码如下：

lunbo.html关键代码：（图片部分自行处理）

<div class="pic">
<div class="pic1"><img src="image/headImage/pic1.jpg"></div>
<div class="pic2"><img src="image/headImage/pic2.jpg"></div>
<div class="pic3"><img src="image/headImage/pic3.jpg"></div>
<div class="num">
<span class="num1">1</span>
<span class="num2">2</span>
<span class="num3">3</span>
</div>
</div>
<div class="picLeft"><img src="image/headImage/left.jpg"></div>
<div class="picRight"><img src="image/headImage/right.jpg"></div>

lunbo.css关键代码如下：

*{
margin:0;
padding:0;
}
body{
width:1250px;
margin:0 auto;
}

.pic{
position:absolute;

margin-left:120px;
}
.pic1{
position:absolute;
z-index:3;
}
.pic2{
position:absolute;
z-index:2;
}
.pic3{
position:absolute;
z-index:1;
}
.picLeft{
position: absolute;
z-index: 4;
margin-top: 100px;
margin-left:30px;
}
.picRight{
position: absolute;
z-index: 4;
margin-top: 100px;
margin-left: 1150;
}
.num{
width:300px;
position: absolute;
margin-left: 420px;
z-index: 4;
margin-top: 250px;
}
.num1{
margin-left:30px;
display:block;
background: #345;
width:30px;
height:30px;
text-align: center;
line-height: 30px;
color:#fff;
font-size:20px;
font-weight:20px;
float: left;
cursor: pointer;
}
.num2{
margin-left:30px;
display:block;
background: #345;
width:30px;
height:30px;
text-align: center;
line-height: 30px;
color:#fff;
font-size:20px;
font-weight:20px;
float: left;
cursor: pointer;
}
.num3{
margin-left:30px;
display:block;
background: #345;
width:30px;
height:30px;
text-align: center;
line-height: 30px;
color:#fff;
font-size:20px;
font-weight:20px;
float: left;
cursor: pointer;
}
lunbo.js关键代码如下（引用时需要引入jQuery包）：

$(function(){
$("#nav li").mouseover(function(){
$(this).css("background","blue").css("font-size","30px");
});
$("#nav li").mouseleave(function(){
$(this).css("background","#333").css("font-size","20px");
});
$(".picLeft").click(function(){
var a=$(".pic1").css("z-index");
var b=$(".pic2").css("z-index");
var c=$(".pic3").css("z-index");
if(a==3){
a=1;
b=3;
c=2;
}else if(b==3){
b=1;
a=2;
c=3;
}else if(c==3){
c=1;
b=2;
a=3;
}
var d=a.toString();
var e=b.toString();
var f=c.toString();
$(".pic1").css("z-index",d);
$(".pic2").css("z-index",e);
$(".pic3").css("z-index",f);
});
$(".picRight").click(function(){
var a=$(".pic1").css("z-index");
var b=$(".pic2").css("z-index");
var c=$(".pic3").css("z-index");
if(a==3){
a=2;
b=1;
c=3;
}else if(b==3){
b=2;
a=3;
c=1;
}else if(c==3){
c=2;
b=3;
a=1;
}
var d=a.toString();
var e=b.toString();
var f=c.toString();
$(".pic1").css("z-index",d);
$(".pic2").css("z-index",e);
$(".pic3").css("z-index",f);
});
$(".num1").click(function(){
$(".pic1").css("z-index","3");
$(".pic2").css("z-index","2");
$(".pic3").css("z-index","1");
});
$(".num2").click(function(){
$(".pic2").css("z-index","3");
$(".pic3").css("z-index","2");
$(".pic1").css("z-index","1");
});
$(".num3").click(function(){
$(".pic3").css("z-index","3");
$(".pic1").css("z-index","2");
$(".pic2").css("z-index","1");
});
});