jQSlide.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/jQSlide.css"/>
</head>
<body>
<div class="focus_box">
<ul class="focus_bd">
<li><img src="img/img01.jpg"/></li>
<li><img src="img/img02.jpg"/></li>
<li><img src="img/img03.jpg"/></li>
<li><img src="img/img04.jpg"/></li>
</ul>
<ul class="focus_btn">
</ul>
</div>
</body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jQSlide.js"></script>
<script type="text/javascript">
$(".focus_box").slide({
isAuto: true,//是否自动轮播
hasNext: true,//是否含有下一个按钮
hasPrev: true,//是否含有上一个按钮
activeIndex: 0,//当前展示图片索引，默认为0
speed: 300,//动画速度
time: 3000//间隔时间
});
</script>
</html>
jQSlide.js
(function($){
$.fn.slide = function(config){
var defaults = {
isAuto: true,//是否自动轮播
hasNext: true,//是否含有下一个按钮
hasPrev: true,//是否含有上一个按钮
activeIndex: 0,//当前展示图片索引，默认为0
speed: 300,//动画速度
time: 3000//间隔时间
};
var config = $.extend(defaults, config);
var that = $(this);
var activeIndex = config.activeIndex;
var oWidth = that.width();
var picBox = that.find(".focus_bd");
var btnBox;
var picLists;
var btnLists;
var timer;
//如果没有图片或者图片数量小于2返回
if (!picBox.find("li") || picBox.find("li") < 2) {
return;
}
//渲染DOM结构
var render = function(){
btnBox = that.find(".focus_btn");
//添加触点
var len = picBox.find("li").length;
var str = "";
for (var i = 0; i < len; i++) {
str+="<li>" + (i+1) + "</li>";
}
btnBox.html(str);
btnLists = btnBox.find("li");
//为当前触点添加类名
btnLists.eq(config.activeIndex).addClass("on");
//图片列表设置样式
picBox.css("width", oWidth* len);
picLists = picBox.find("li");
picLists.css("width", oWidth);
//如果有上一个按钮则添加DOM结构
if (config.hasPrev) {
that.append("<a href='javascript:;' class='btn_prev'><</a>");
}
//如果有下一个按钮则添加DOM结构
if (config.hasNext) {
that.append("<a href='javascript:;' class='btn_next'>></a>");
}
};
//滑动函数
var move = function(index){
btnLists.eq(index).addClass("on").siblings().removeClass("on");
picBox.stop().animate({
left: -index * oWidth
},config.speed)
activeIndex = index;
};
//开始滑动
var startMove = function(){
if (activeIndex == picLists.length-1) {
activeIndex = 0;
}else{
activeIndex++;
}
console.log(activeIndex);
move(activeIndex);
};
//自动播放
var autoPlay = function(){
timer = setInterval(startMove, config.time);
};
//事件绑定
var bindEvent = function(){
//鼠标滑到数字上的时候
btnLists.mouseenter(function(){
//这两句有用
var that = $(this);
console.log(that);
activeIndex = that.index();
console.log(activeIndex);
move(activeIndex);
});
//鼠标移出轮播图区域，开始自动播放；移进轮播区域，停止自动播放
if (config.isAuto) {
that.mouseover(function(){
clearInterval(timer);
}).mouseout(function(){
clearInterval(timer);
autoPlay();
});
}
//如果存在上一个按钮，则点击上一页切换到上一张
if (config.hasPrev) {
that.find(".btn_prev").on("click", function(){
var toIndex = activeIndex - 1;
toIndex = toIndex < 0 ? picLists.length-1 : toIndex;
move(toIndex);
});
}
//如果存在下一个按钮，则点击下一页切换到下一张
if (config.hasNext) {
that.find(".btn_next").on("click", function(){
var toIndex = activeIndex + 1;
toIndex = toIndex > picLists.length-1 ? 0 : toIndex;
move(toIndex);
});
}
};
var init = function(){
render();
if (config.isAuto) {
autoPlay();
}
bindEvent();
};
init();
return this;
}
})(jQuery);
jQSlide.css
*{margin: 0; padding: 0;}
ul{list-style: none;}
.focus_box{position: relative; width: 400px; height: 400px; margin: 50px auto 0; overflow: hidden;}
.focus_box .focus_bd,.focus_box .focus_btn{position: absolute;}
.focus_box .focus_btn{bottom: 10px; right: 20px;}
.focus_box .focus_btn li{float: left; width: 18px; height: 18px; line-height: 18px; text-align: center; background: #000; color: #999; cursor: pointer; margin-right: 5px; display: inline-block;}
.focus_box .focus_btn li.on{color: #fff;}
.focus_box .focus_bd{top: 0; left: 0;}
.focus_box .focus_bd li{float: left; display: inline-block;}
.focus_box .focus_bd img{display: block; width: 400px; height: 400px;}
/*a标签是行标签，但是定位后就可以设置宽高*/
.focus_box .btn_prev,.focus_box .btn_next{position: absolute; width: 40px; height: 40px; line-height: 40px; background-color: rgba(0,0,0,0.5); color: #fff; top: 50%; margin-top: -20px; text-align: center; font-family: arial; font-size: 30px;}
a{text-decoration: none;}
.focus_box .btn_next{right: 0;}
.focus_box .btn_prev{left: 0;}