jquery 焦点图

/*   

 用法：$("#focus").Jfocus({
 path:"top" //path表示图片滚动方向，默认向上滚动 ，可设置left滚动
 time:"3000" //图片滚动时间，默认3000毫秒
 auto:"true" //是否自动滚动
 number:"true" //是否显示按钮数字
 bgdiv:"true" //是否显示背景标题
 });

 整体focus骨架不变，依然是常用的结构如下：
 <div id="focus">
 <ul>
 <li><a href="#"><img src="图片1" alt /></a></li>
 <li><a href="#"><img src="图片2" alt /></a></li>
 <li><a href="#"><img src="图片3" alt /></a></li>
 <li><a href="#"><img src="图片4" alt /></a></li>
 </ul>
 </div>

 整体样式不变，可以更改 id 名称，样式属性值。但不能更改按钮样式名 btn 。更改焦点图显示大小，请修改对应样式值
 #focus {width:490px; height:170px; overflow:hidden; position:relative;}
 #focus ul {height:380px; position:absolute;}
 #focus ul li {float:left; width:490px; height:170px;}
 #focus ul li img { width:490px; height:170px;}
 #focus .btn {position:absolute; width:490px; height:24px; left:0; bottom:5px; text-align:right}
 #focus .btn span {display:inline-block; _display:inline; _zoom:1; width:20px; height:20px; line-height:20px;  border-radius:20px;margin-right:15px; background:#f90; color:#fff;  text-align:center; font-size:14px; font-family:"Microsoft YaHei",SimHei; cursor:pointer;font-weight:bold; }
 #focus .btn span.on {background:#fff !important; color:#f80;}

 */

(function ($) {
    $.fn.Jfocus = function (options) {
        var defaults = {path: "top", time: "3000", auto: "true", number: "false", bgdiv: "false"}; //定义图片默认滚动方向
        var opts = $.extend({}, defaults, options);
        var $this = $(this);
        var $objul = $this.find("ul");

        var sWidth = $this.width(); //获取焦点图的宽度
        var sHeight = $this.height(); //获取焦点图的高度
        var $objli = $objul.find("li");
        var len = $objli.length; //获取焦点图个数
        var index = 0;
        var picTimer;
        var timer;

        //以下代码添加数字按钮
        if (len != 1) {
            var btnhtml = "<div class=‘btn‘>";
            if (opts.bgdiv == "true") {
                var btnbghtml = "<div class=‘btnbg‘><strong></strong></div>"
                $this.append(btnbghtml);
                showTit(0);
            }
            if (opts.number == "true") {
                for (var i = 0; i < len; i++) {
                    i == 0 ? btnhtml += "<span class=‘on‘>" + 1 + "</span>" : btnhtml += "<span>" + (i + 1) + "</span>";
                }
            }
            else {
                for (var i = 0; i < len; i++) {
                    i == 0 ? btnhtml += "<span class=‘on‘></span>" : btnhtml += "<span></span>";
                }
            }
            btnhtml += "</div>";
            $this.append(btnhtml);
        }
        var $objspan = $this.find("span");

        //判断图片滚动方向
        if (opts.path == "left") {
            $objul.css("width", sWidth * (len + 1));  //如果左右滚动，计算出外围ul元素的宽度
        }
        else {
            $objli.css("float", "none"); //如果上下滚动，清除li的左浮动
        }

        //为数字按钮添加鼠标滑入事件，以显示相应的内容
        $objspan.hover(function () {
            var that = this;
            timer = setTimeout(function () {
                index = $objspan.index(that);
                showTit(index);
                showPics(index);
            }, 200);
        }, function () {
            clearTimeout(timer);
        });

        //鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
        $this.hover(function () {
            clearInterval(picTimer);
        }, function () {
            interval();
        });

        if (opts.auto = "true") {
            function interval() {
                picTimer = setInterval(function () {
                    if (index == len) { //如果索引值等于li元素个数，说明最后一张图播放完毕，接下来要显示第一张图，即调用showFirPic()，然后将索引值清零
                        showFirPic();
                        index = 0;
                    } else { //如果索引值不等于li元素个数，按普通状态切换，调用showPics()
                        showPics(index);
                        showTit(index);
                    }
                    index++;
                }, opts.time); //time自动播放的间隔
            }

            interval();
        }

        function showTit(index) { //显示标题
            $tit = $objli.find("img").eq(index).attr("title");
            $(".btnbg").find("strong").text($tit);
        }

        //显示图片函数，根据接收的index值显示相应的内容
        function showPics(index) {
            if (opts.path == "left") {
                var nowLeft = -index * sWidth; //根据index值计算ul元素的left值
                $objul.stop(true, false).animate({"left": nowLeft}, 500); //通过animate()调整ul元素滚动到计算出的position
                $objspan.removeClass("on").eq(index).addClass("on"); //为当前的按钮切换到选中的效果
            } else {
                var nowTop = -index * sHeight;
                $objul.stop(true, false).animate({"top": nowTop}, 500);
                $objspan.removeClass("on").eq(index).addClass("on");
            }
        }

        function showFirPic() { //最后一张图自动切换到第一张图时专用
            $objul.append($objli.first().clone());
            if (opts.path == "left") {
                var nowLeft = -len * sWidth; //通过li元素个数计算ul元素的left值，也就是最后一个li元素的右边
                $objul.stop(true, false).animate({"left": nowLeft}, 500, function () {
                    //在动画结束后把ul元素重新定位到起点，然后删除最后一个复制过去的元素
                    showTit(0);
                    $objul.css("left", "0");
                    $objli.last().next().remove();
                });
            } else {
                var nowTop = -len * sHeight; //top值
                $objul.stop(true, false).animate({"top": nowTop}, 500, function () {
                    showTit(0);
                    $objul.css("top", "0");
                    $objli.last().next().remove();
                });
            }
            $objspan.removeClass("on").eq(0).addClass("on"); //为第一个按钮添加选中的效果
        }
    };
})(jQuery);