<div id="box">
<ul><li><img src="img/01.jpg"</li>
<li><img src="img/02.jpg"</li>
<li><img src="img/03.jpg"</li>
<li><img src="img/04.jpg"</li>
<li><img src="img/05.jpg"</li>
</ul>
<p>
<span class="active">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</p>
</div>
// 封装一个slide方法 此时$(this)指向的是调用它的对象
$.fn.slide = function () {
var oUl = $(this).children("ul"); //children() 返回的仅仅是儿子辈,参数是选填项
var aSpan = $(this).find("span"); // find() 返回的是所有的子孙辈,参数为必填项
var num = 0;
var timer = null;
// 鼠标移动上去,图片切换
aSpan.each(function (i) {
$(this).mouseover(function () {
aSpan.removeClass("active");
$(this).addClass("active");
num = i; //当鼠标移上去的时候改变的是num的值,这样移开后计时器会按照这个num值继续走
oUl.css("top", -(172 * num)); // 图片的高度是172px
});
});
// 鼠标移上去,计时器停止,移开继续;
$(this).mouseover(function () {
clearInterval(timer);
}).mouseout(function () {
autoplay();
})
// 自动切换
function autoplay() {
timer = setInterval(function () {
num++;
num %= aSpan.length;
aSpan.removeClass("active");
oUl.css("top", -(172 * num));
aSpan.eq(num).addClass("active");
}, 1000);
};
autoplay();
};
$(function () {
// 使用方法
$("#box").slide();
});