一个带百叶窗焦点图片的jQuery插件源码发布

浏览数：19 / 时间：2015年06月09日

实现了百叶窗、左右、上下的焦点图片切换，兼容IE 6-10 ,firefox,chorme.

源码下载地址：http://download.csdn.net/detail/aofengdaxia/6898081

插入几种效果：

主要代码：

[javascript] view plaincopyprint?

/**
* Created by aofengdaxia on 14-2-4.
*/
(function ($) {
$.fn.slider = function (option) {
var defaults = {
stay: 3000,
type: "box",
speed: 600,
direction: "leftRight",
rowNum: 5,
columnNum: 10,
boxOut: { width: "0px", height: "0px", opacity: "0"}
}
var index = 0;
var next = 1;
var timer;
var opt = $.extend(defaults, option);
var stage = $(this);
var sw = stage.width();
var sh = stage.height();
var pics = stage.children("img");
if ($(this).length > 1) {
pics.hide();
alert("please config the slider pic. make sure single object");
return;
}
stage.html("");
if (opt.direction != "leftRight" && opt.type != "box") {
stage.html("<div style=‘width: " + sw + "px; height: " + sh + "px; overflow: hidden;‘><div class=‘tbStage‘ style=‘ overflow:hidden; ‘></div></div>");
stage.find(".tbStage").append(pics);
pics.css("float", "left");
} else {
stage.append(pics);
stage.css("white-space", "nowrap");
}
var totalNum = pics.length;
stage.css("overflow", "hidden");
pics.css("width", sw + "px");
pics.css("height", sh + "px");
if (opt.type == "box") {
pics.hide();
stage.append("<div style=‘ width: " + sw + "px; height: " + sh + "px; overflow:hidden;‘ class=‘slider1‘></div>");
stage.append("<div style=‘ position: absolute; width: " + sw + "px; height: " + sh + "px; overflow:hidden; " +
"margin-top:-" + sh + "px;‘ class=‘slider2‘></div>")
stage.find(".slider1").html("<img src=‘" + pics.eq(index).attr("src") + "‘ " +
"style=‘width:" + sw + "px; height:" + sh + "px‘ />");
stage.find(".slider1").css("z-index", "0");
stage.find(".Slider2").css("z-index", "1");
}
addBtn();
addTimer();
stage.find(".tPager").click(function () {
clearInterval(timer);
var nIndex = $(this).attr("index");
change(index, nIndex);
index = nIndex;
addTimer();
});
function addBtn() {
var pl = pics.length;
var html = "";
html += "<div style=‘ margin-top: -30px; margin-left: " + (sw - pl * 25 - 30) + "px; height: 20px; position: absolute; z-index: 9999‘>"
for (var i = 0; i < pl; i++) {
html += "<span class=‘tPager‘ index=‘" + i + "‘ style=‘cursor:pointer; display: block; width: 15px; height: 15px; float: left; margin-left: 10px; background-color: aquamarine‘></span>"
}
html += "</div>"
stage.append(html);
}
function addTimer() {
timer = setInterval(function () {
next = parseInt(index) + 1;
if (next >= totalNum) {
next = 0;
}
change(index, next);
index = next;
}, opt.stay);
}
function change(i, n) {
if (opt.type == "box") {
stage.find(".slider1").html("<img src=‘" + pics.eq(n).attr("src") + "‘ style=‘width:" + sw + "px; height:" + sh + "px‘ />");
MakeBoxes(pics.eq(i));
$(".boxes").each(function () {
$(this).animate(opt.boxOut, opt.speed);
});
} else {
MoveTo(i, n);
}
stage.find(".tPager[index=" + i + "]").css("border", "0px solid black").css("backgroundColor", "aquamarine");
stage.find(".tPager[index=" + n + "]").css("border", "1px solid red").css("backgroundColor", "red");
}
function MakeBoxes(obj) {
var r = opt.rowNum;
var c = opt.columnNum;
var bw = Math.round(sw / c);
var bh = Math.round(sw / r);
var htmls = "";
var ii = 0;
for (var j = 0; j < r; j++) {
for (var i = 0; i < c; i++) {
var ml = -1 * bw * i;
var mt = -1 * bh * j;
htmls += "<div style=‘position: absolute; margin-left: " + (-1 * ml) + "px; " +
"margin-top: " + (-1 * mt) + "px; width: " + bw + "px; height: " + bh + "px; overflow: hidden; float: left; z-index:1‘" +
" class=‘boxes‘ index=" + ii + ">"
htmls += "<img src=‘" + obj.attr("src") + "‘ style=‘margin-left: " + ml + "px; margin-top:" + mt + "px; width: "
+ sw + "px; height: " + sh + "px; z-index:1;‘ />";
htmls += "</div>"
ii++;
}
}
stage.find(".slider2").html(htmls)
}
function MoveTo(i, n) {
if (opt.direction == "leftRight") {
var ml = -1 * n * sw;
pics.eq(0).animate({ marginLeft: ml + "px"}, opt.speed);
} else {
var mt = -1 * n * sh;
stage.find(".tbStage").animate({ marginTop: mt + "px"}, opt.speed);
}
}
}
})(jQuery);