使用jQuery制作轮播图插件

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片轮播</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.slideShow{
position: relative;
margin: 50px auto;
height: 500px;
width: 500px;
overflow: hidden;
}
img{
width: 500px;
height: 500px;
}
.slideShow ul{
position: relative;
width: 2000px;
}
.slideShow ul li{
float: left;
width: 500px;
}
.slideShow .nav{
text-align: center;
position: absolute;
right: 10px;
bottom: 10px;
font-size: 12px;line-height: 18px;
}
.slideShow .nav span{
-webkit-user-select:none;
user-select:none;
float: left;
cursor: pointer;
border-radius: 9px;
display: inline-block;
width: 18px;
height: 18px;
background:rgba(0,0,0,0.7);
margin-left: 2px;
color: #fff;
opacity: 0.5;
}
.slideShow .nav span.active{
opacity: 1
}
</style>
</head>
<body>
<div class="slideShow" id="slide1">
<ul>
<li><a href="#"><img src="images/01.jpg" alt=""></a></li>
<li><a href="#"><img src="images/02.jpg" alt=""></a></li>
<li><a href="#"><img src="images/03.jpg" alt=""></a></li>
<li><a href="#"><img src="images/04.jpg" alt=""></a></li>
</ul>
<div class="nav">
<span class="active">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</div>
<div class="slideShow" id="slide2">
<ul>
<li><a href="#"><img src="images/05.jpg" alt=""></a></li>
<li><a href="#"><img src="images/06.jpg" alt=""></a></li>
<li><a href="#"><img src="images/07.jpg" alt=""></a></li>
<li><a href="#"><img src="images/08.jpg" alt=""></a></li>
</ul>
<div class="nav">
<span class="active">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</div>

</body>
</html>

jquery.slideShow.js

(function($){
$.fn.slideShow = function(){
return this.each(function(){ //遍历所有选择到的幻灯片
var me = $(this); //me是当前的幻灯片
var ul = me.find("ul"); //获取ul
var nav = me.find(".nav span"); //获取1,2,3,4的按钮
var oneWidth = ul.find("li").eq(0).width(); //获取ul第一项的宽度
var timer = null;
var iNow = 0;

me.hover(function(){ //鼠标移入和鼠标移出时分别执行的两个函数
clearInterval(timer); //移入清楚自动点击事件
},function(){
autoPlay(); //鼠标移出时自动执行
});

//给1/2/3/4按钮添加点击事件
nav.on("click",function(){
var me = $(this); //当前点击对象
var index = me.index(); //当前点击对象的索引值
iNow = index; //点击时候动态更新inow
ul.animate({
"left":-oneWidth*iNow //使ul动起来
});
nav.removeClass("active"); //重置其他的样式
me.addClass("active"); //给当前点击对象添加active高亮的样式
});

autoPlay();

//自动切换效果，每隔2s钟自动点击相应的索引按钮
function autoPlay(){
timer = setInterval(function(){
iNow++;
if (iNow>nav.length) { //自动点击到最后一项时，从头开始
iNow=0;
};
nav.eq(iNow).trigger("click"); //trigger自动触发事件，触发click自动点击
},2000);
};

});
};

})(jQuery);

main.js

$(document).ready(function(){
$(".slideShow").slideShow();

});