大图滚动插件

jQSlide.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</ul>

</ul>

</div>

</body>

$(".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;}