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

痛定思痛。 2022-09-19 12:27 71阅读 0赞

原理：

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

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

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

效果预览：

![Center][]

以下是核心代码：

//取得外部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);
                    });
                }

免费代码打包下载： [百度网盘][Link 1]

[Center]: /images/20220828/5459ac65ccae4a059205870bbbeed481.png
[Link 1]: http://pan.baidu.com/s/1kTAy78F