我們經常使用到滾動圖片,那我們下面就來講一個滾動圖片的插件
(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 });
有問題找深圳網站建設:獨占網絡