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