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

深碍√TFBOYSˉ_ 2022-08-25 14:45 10阅读 0赞

这次的版本是加急版。因为需要兼容多个图片滚动。所以临时改动的。向上向下切换有问题。横向切换时没有问题的。

支持大图切换，也支持小图切换

代码：

/*
        z-Slider是一个可以无限循环向前滚动的图片滚动插件。
        制作时间：2014年1月13日。版本V0.2
        作者：疯狂紫萧
    */
    (function ($) {
        $.fn.slider = function (options) {
            var defaults = {
                widths: 960,//图片宽度
                heights: 540,//图片的高度
                autoplay: 1,//是否自动滚动，默认0不自动滚动
                autotime: 5000,//自动滚动的时间间隔
                animetime: 300, //滚动一次需要的时间
                direction: 0,//滚动方向，0：左，1：右,2:下,3:上
                controls: 1,//是否有控制按钮
                controlsNum: 1,//控制按钮是否有数字
                btns: 1//是否有左右按钮
    
            };
            var options = $.extend(defaults, options);
            return this.each(function () {
                //取得外部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() }));
                $("ul", obj).clone().appendTo("ul",obj);
    
                //横向排列
                if (options.direction === 1 || options.direction === 0) {
                    margins = "margin-left";
                    //设置ul的宽度
                    $("ul:eq(0)", obj).width((len *2) * 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 *2) * 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);
                    });
                }
    
            });
        }
    })(jQuery)