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

原理：

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

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

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

效果预览：

以下是核心代码：

//取得外部div对象
            var obj = $(this);
            //取得img的数量
            var len = $(".slider-imgs li", obj).length;
            //初始化开始的位置
            var start_index = 0;
            //初始化定时器
            var timer = null;
            //在末尾添加一个新的开始元素
            $(".slider-imgs ul", obj).append($("<li>", { "html": $(".slider-imgs ul li:eq(0)", obj).html() }));
            //设置ul的宽度
            $(".slider-imgs ul", obj).width((len + 1) * parseInt(options.widths) + 'px').height(options.heights + "px");
            //设置图片的宽度和高度
            $(".slider-imgs ul li img", obj).css({ "width": options.widths + "px", "height": options.heights + "px" });

            //移动方法,参数：移动第几个
            function moveTo(indexs) {
                if (start_index != indexs) {
                    if (indexs == len + 1 && start_index == len) {
                        $(".slider-imgs ul", obj).css("margin-left", "0px");
                        start_index = 1;
                    }
                    else if (indexs == -1 && start_index == 0) {
                        $(".slider-imgs ul", obj).css("margin-left", -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");
                    }
                    $(".slider-imgs ul", obj).stop().animate({ "margin-left": -start_index * options.widths + "px" }, options.animetime, "swing", function () {

                    });
                }
            }

            //如果contro存在
            if ($(".slider-controls", obj)) {
                //给control加上合适的按钮
                for (var i = 0; i < len; i++) {
                    $(".slider-controls", obj).append($("<a>", { "href": "javascript:", "text": i + 1 }));
                }
                //如果有内容就给第一个加样式
                if (len > 0) {
                    $(".slider-controls a:eq(0)", obj).addClass("active");
                }
                //设置control的位置为居中
                $(".slider-controls", obj).css("margin-left", -len * 10 + "px");
                //点击具体的位置
                $(".slider-controls a", obj).bind("click", function () {
                    moveTo($(this).index());
                });
            }
            //如果向上一级，向下一级的按钮存在
            if ($(".slider-pn", obj)) {
                //点击上一张
                $(".slider-pre", obj).bind("click", function () {
                    moveTo(start_index - 1);
                });
                //点击下一张
                $(".slider-next", obj).bind("click", function () {
                    moveTo(start_index + 1);
                });
            }

            //初始化第一个
            moveTo(0);
            //如果定时器设置为1，则开启定时切换
            if (options.autoplay == 1) {
                timer = setInterval(function () {
                    moveTo(start_index + 1);
                }, options.autotime);
                //图片上的时候
                $(".slider-imgs ul", obj).mouseenter(function () {
                    clearInterval(timer);
                }).mouseleave(function () {
                    timer = setInterval(function () {
                        moveTo(start_index + 1);
                    }, options.autotime);
                });
                //左右2侧的时候
                $(".slider-pn", obj).mouseenter(function () {
                    clearInterval(timer);
                }).mouseleave(function () {
                    timer = setInterval(function () {
                        moveTo(start_index + 1);
                    }, options.autotime);
                });
            }

免费代码打包下载： 百度网盘