我们经常使用到滚动图片，那我们下面就来讲一个滚动图片的插件
(function ($) {
$.fn.DuZhanScroll = function (options) {
var defaults = {
//默认的参数
leftbtn: "",
showclass: "showInfo",
rightbtn: "",
showleg: ""
};
//得到参数
var options = $.extend(defaults, options);
//定义当前的位置
var showindex = 0;
var leg = $(options.showclass + " li").length;
var movewidth = $(options.showclass + " li").outerWidth(true);
var leftbtninfo = $(options.leftbtn);
var rightbtninfo = $(options.rightbtn);
var showleginfo = options.showleg;
var flag = 0;
//点击事件
leftbtninfo.live("click", function () {
if (flag == 0) {
flag = 1;
showindex--;
showMove()
}
});
//点击事件
rightbtninfo.live("click", function () {
if (flag == 0) {
flag = 1;
showindex++;
showMove()
}
});
function showMove(index) {
//得到需要移动的距离
var nowLeft = -showindex * movewidth;
//如果小于0
if (showindex < 0) {
//将后一张图片放到张图片上面
$(options.showclass).prepend($(options.showclass + " li:last").clone());
//将当前的参数放置存放一张图片的距离
$(options.showclass).css("left", -movewidth);
$(options.showclass).stop(true, false).animate({ "left": 0 }, 500, function () {
flag = 0;
showindex++;
$(options.showclass + " li:last").remove();
});
} else if (leg - showleginfo <= showindex) {
//将张图片放到后一张
$(options.showclass).append($(options.showclass + " li:first").clone());
$(options.showclass).stop(true, false).animate({ "left": nowLeft }, 500, function () {
flag = 0;
showindex--;
$(this).css("left", (nowLeft + movewidth));
$(options.showclass + " li:first").remove();
});
} else {
$(options.showclass).stop(true, false).animate({ "left": nowLeft }, 500, function () {
flag = 0;
});
}
}
}
})(jQuery)
后就是我们调用方法
$(".indexscool").DuZhanScroll({ showclass: ".indexscool", leftbtn: ".l_an", rightbtn: ".r_an", showleg: 4 });
有问题找深圳网站建设：独占网络
