图片轮播重点

图片轮播重点：
1.查找指定编号的标签：eq(变量);
2.清楚定时器：clearTimeout(变量)
3.设定定时器：setTimeout（。

）
4.获取当前编号：$(...).index();
5.增加类：addClass("");
去除类：removeCladd();
6。

“旧的不去，新的不来”
注：半透明
p｛——moz-opacity:0.5;//IE
filter:alpha(opacity=50);//火狐
opaciy:0.5;//其他浏览器
｝
js代码：
$(document).ready(function(){
lunbo();
});
function lunbo(){
var num=$("#nav>.nav_ul>li").length;//获取图片的张数 var n=0; //定义当前图片
$("#nav>.nav_p>pan").eq(0).addClass("on");
var myset=setTimeout(function(){bianhua();},2000);
function bianhua(){
n++;
if(n>=num){n=0;}
$("#nav>.nav_ul>li").fadeOut("fast");
$("#nav>.nav_ul>li").eq(n).slideDown("normal"); //eq(n)是指查找指定编号的标签；
//旧的不去，新的不来；
$("#nav>.nav_p>span").removeClass("on"); //去除类；
$("#nav>.nav_p>span").eq(n).addClass("on"); //增加类；
myset=setTimeout(function(){bianhua();},2000);
}
$("#nav>.nav_p>span").hover( function(){clearTimeout(myset);
//clearTimeout(myset)清除定时器；
n=$(this).index(); //index()获取当前编号；
$("#nav>.nav_ul>li").fadeOut("fast");
$("#nav>.nav_ul>li").eq(n).slideDown("normal"); //eq(n)是指查找指定编号的标签；
//旧的不去，新的不来；
$("#nav>.nav_p>span").removeClass("on"); //去除类；
$("#nav>.nav_p>span").eq(n).addClass("on"); //增加类；
},
function(){myset=setTimeout(function(){bianhua();},2000);}); }//获取lunbo（）标签；
div：
<div id="nav">
<ul class="nav_ul">
<li><a href="#"><img src="images/1.jpg" width="446" height="248" /></a></li>
<li><a href="#"><img src="images/2.jpg" width="442" height="240" /></a></li>
<li><a href="#"><img src="images/3.jpg" width="442" height="240" /></a></li>
<li><a href="#"><img src="images/4.jpg" width="442" height="240" /></a></li>
<li><a href="#"><img src="images/5.jpg" width="442" height="240" /></a></li>
<li><a href="#"><img src="images/6.jpg" width="442" height="240" /></a></li>
</ul>
<p class="nav_p">
<span class="on">1</span> <span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</p>
</div>
css：
*{
margin:0px;
padding:0px;
}
body{
font-size:14px;
color:#fff;
line-height:24px;
font-family:"黑体";
text-align:center;
}
ul,li,ol,dl{
list-style:none;
}
.clear{
clear:both;
height:0px;
font-size:0px;
line-height:0px;
overflow:hidden;
}
a{
text-decoration:none;
color:#fff;
}
a:hover{
color:#000;
}
img{
border:none;
}
li,input,textarea,select{ vertical-align:middle; }
//注：为通用样式；
#nav{
position:relative;
margin-left:auto;
margin-right:auto;
width:446px;
height:248px;
overflow:hidden;
}
#nav .nav_ul{
width:446px;
height:248px;
overflow:hidden;
}
#nav .nav_ul li{
width:446px;
height:248px;
overflow:hidden;
}
#nav .nav_p{
position:absolute;
right:0px;
bottom:5px;
-moz-opacity:0.8px;
filter:alpha(opacity=80); opacity:0.8;
}
#nav .nav_p span{
background:#C39;
border:1px solid #ffc;
padding-left:5px;
padding-right:5px;
margin-left:3px;
text-align:center;
cursor:pointer;
}
#nav .nav_p .on{
background:#CF6;
border:1px solid #fff;
color:#000; }。