JQuery图片轮播详细说明和实现

主要记录一下今天学到的内容：

css代码：

ol,ul{
list-style: none;

}
/* 头部开始  */
.head{
/*background-color: red;*/
height: 500px;
padding-top: 10px;

}
.head .nav{
height: 480px;
overflow: hidden;
position: relative;
width: 1200px;
left: 50%;
margin-left: -600px;
/*line-height: 150px;*/
}
.head .num{
position: absolute;
right: 5px;
bottom: 5px;
}
.head .num li{
float: left;
width: 16px;
height: 16px;
text-align: center;
border: 1px solid #ff7300;
background-color: #fff;
margin: 3px 1px;
overflow: hidden;
line-height: 16px;

}
.head .num li.on{
color: #fff;
line-height: 21px;
width: 21px;
height: 21px;
background-color: #ff7300;
border: 0;

}

H5和Jquery代码：

<div class="head">
<div class="nav">
<ul class="ad">
<li><img src="img/slider1.jpg"></li>
<li><img src="img/slider2.jpg"></li>
<li><img src="img/slider3.jpg"></li>
<li><img src="img/slider4.jpg"></li>
</ul>
<ul class="num">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>

</ul>
</div>

</div>
<div class="content"></div>
<div class="footer"></div>
<script src="jquery.min.js"></script>
<script>
var len=$(".num>li").length;
var index=0;
var adTimer;
$(".num li").mouseover(function(){
index=$(".num li").index(this);
showImage(index);
})

$(".nav").hover(function(){
clearInterval(adTimer);

},function(){
adTimer=setInterval(function(){
showImage(index);
index++;
if(index==len)
index=0;
},3000);

}).trigger("mouseleave");

function showImage(index)
{
var adHeight=$(".nav>ul>li:first").height();
if(index==0)
$(".ad").stop(true,false).animate({
"marginTop":-adHeight*index+"px"
},1);
else
$(".ad").stop(true,false).animate({
"marginTop":-adHeight*index+"px"
},1000);
$(".num li").removeClass("on").eq(index).addClass("on");
}

</script>

函数说明：

1.eq():

如果给定表示 DOM 元素集合的 jQuery 对象，.eq() 方法会用集合中的一个元素构造一个新的 jQuery 对象。所使用的 index 参数标示集合中元素的位置。

2.triggle():

trigger() 方法触发被选元素的指定事件类型,这次主要为了页面一进来就开始执行mouseleave事件

3.hover():

hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。
jQuery 1.7 版本前该方法触发 mouseenter 和 mouseleave 事件。
jQuery 1.8 版本后该方法触发 mouseover 和 mouseout 事件。
这次主要为了开始计时和结束