用jQuert制作轮播图-兼容各种浏览器2

更新：

支持左右上下4个方向，

控制按钮的显示和数字的显示，

可以控制上下按钮的显示，

精简页面代码，

更新日期2014年1月13日

如有发现错误，请留言之处，不胜感激

原理：

1.图片由ul、li组成。当它左右切换的时候移动ul的margin-left。上下移动的时候移动ul的margin-top以此来达到左右移动图片的目的。

2.每个图片对应的按钮在初始化的时候生成，然后再添加事件，可以免除事件加不上去的麻烦。

3.左右两侧的按钮不能写在一个div中，结果就是图片上有一条不能点击的区域。单独写即可。

效果预览：

一下开始核心代码：

//取得外部div对象
            var obj = $(this);
            //初始化开始的位置
            var start_index = 0;
            //初始化定时器
            var timer = null;
            //取得img的数量
            var len = $("ul:eq(0) li", obj).length;
            //移动操作的css
            var margins = "";

            //核心移动方法
            function moveTo(indexs) {
                if (start_index != indexs) {
                    if (indexs == len + 1 && start_index == len) {
                        $("ul", obj).css(margins, "0px");
                        start_index = 1;
                    }
                    else if (indexs == -1 && start_index == 0) {
                        $("ul", obj).css(margins, -len * parseInt(options.widths) + "px");
                        start_index = len - 1;
                    }
                    else {
                        start_index = indexs;
                    }
                    if (start_index == len) {
                        $(".slider-controls a", obj).removeClass("active").eq(0).addClass("active");
                    }
                    else {
                        $(".slider-controls a", obj).removeClass("active").eq(start_index).addClass("active");
                    }
                    if (options.direction === 0 || options.direction === 1) {
                        $("ul", obj).stop().animate({ "margin-left": -start_index * options.widths + "px" }, options.animetime, "swing");
                    }
                    else {
                        $("ul", obj).stop().animate({ "margin-top": -start_index * options.heights + "px" }, options.animetime, "swing");
                    }
                }
            }

            //设置全局样式
            obj.addClass("z-slider");
            //在末尾添加一个新的开始元素
            $("ul:eq(0)", obj).append($("<li>", { "html": $("ul:eq(0) li:eq(0)", obj).html() }));

            //横向排列
            if (options.direction === 1 || options.direction === 0) {
                margins = "margin-left";
                //设置ul的宽度
                $("ul:eq(0)", obj).width((len + 1) * parseInt(options.widths) + 'px').height(options.heights + "px").addClass("z-slider-left");

            }
            else if (options.direction === 2 || options.direction === 3) {
                //向下的排列
                margins = "margin-top";
                //设置ul的宽度
                $("ul:eq(0)", obj).width(parseInt(options.widths) + 'px').height((len + 1) * parseInt(options.heights) + "px").addClass("z-slider-top");

            }
            else {
                return;
            }
            //设置li的宽高
            $("ul:eq(0) li", obj).width(options.widths + "px").height(options.heights + "px");

            //添加按钮
            if (options.controls) {
                var control = $("<div>", { "class": "slider-controls" });
                for (var i = 0; i < len; i++) {
                    if (options.controlsNum) {
                        control.append($("<a>", { "href": "javascript:", "text": i + 1 }));
                    }
                    else {
                        control.append($("<a>", { "href": "javascript:", "text": "" }));
                    }
                }
                obj.append(control);

                $(".slider-controls a", obj).bind("click", function () {
                    moveTo($(this).index());
                }).eq(0).addClass("active");
            }
            //添加上一张和下一张
            if (options.btns) {
                obj.append($("<a>", { "href": "javascript:;", "class": "slider-pn slider-pre", "click": function () { moveTo(start_index - 1); } }));
                obj.append($("<a>", { "href": "javascript:;", "class": "slider-pn slider-next", "click": function () { moveTo(start_index + 1); } }));
            }
            //初始化第一个
            moveTo(0);
            //如果定时器设置为1，则开启定时切换
            if (options.autoplay) {
                timer = setInterval(function () {
                    if (!options.direction) {
                        moveTo(start_index + 1);
                    }
                    else if (options.direction) {
                        moveTo(start_index - 1);
                    }
                }, options.autotime);
                //图片上的时候
                $("ul", obj).mouseenter(function () {
                    clearInterval(timer);
                }).mouseleave(function () {
                    timer = setInterval(function () {
                        if (!options.direction) {
                            moveTo(start_index + 1);
                        }
                        else if (options.direction) {
                            moveTo(start_index - 1);
                        }
                    }, options.autotime);
                });
                //左右2侧的时候
                $(".slider-pn", obj).mouseenter(function () {
                    clearInterval(timer);
                }).mouseleave(function () {
                    timer = setInterval(function () {
                        if (!options.direction) {
                            moveTo(start_index + 1);
                        }
                        else if (options.direction) {
                            moveTo(start_index - 1);
                        }
                    }, options.autotime);
                });
            }

Dome地址： 点击打开链接   备用： 点击打开链接