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

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

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

 

插入几种效果：

 

 

主要代码：

/**
 * 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);

使用方法

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="Script/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="Slider.js"></script>
    <link href="main.css" type="text/css"/>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".focus").slider({ type:"move", direction:"leftRight",stay:4000});
            $(".focus2").slider({ type:"move", direction:"topBottom",stay:3000});
            $(".focus3").slider({ type:"box", columnNum:30, rowNum:20,stay:2000});
        });
    </script>
</head>
<body>
<div class="focus" style="width: 660px; height: 300px;  margin:0 auto; ">
    <img src="images/1.jpg"/>
    <img src="images/2.jpg"/>
    <img src="images/3.jpg"/>
    <img src="images/4.jpg"/>
    <img src="images/5.jpg"/>
    <img src="images/6.jpg"/>
</div>
<div class="focus2" style="width: 660px; height: 300px;  margin:0 auto; ">
    <img src="images/1.jpg"/>
    <img src="images/2.jpg"/>
    <img src="images/3.jpg"/>
    <img src="images/4.jpg"/>
    <img src="images/5.jpg"/>
    <img src="images/6.jpg"/>
</div>
<div class="focus3" style="width: 660px; height: 300px;  margin:0 auto; ">
    <img src="images/1.jpg"/>
    <img src="images/2.jpg"/>
    <img src="images/3.jpg"/>
    <img src="images/4.jpg"/>
    <img src="images/5.jpg"/>
    <img src="images/6.jpg"/>
</div>
</body>
</html>

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