用jQuery封装图片轮播

最新推荐文章于 2022-03-03 21:46:19 发布

易安sparkle

最新推荐文章于 2022-03-03 21:46:19 发布

阅读量547

点赞数

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/weixin_43675447/article/details/89923052

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、思路及实现效果

需考虑两个问题：

在调用的情况下，代码块自己可以跑起来
在调用的情况下，用户赋予其新的参数，也可以跑起来

效果及实现思路：

定义一个大块；
在其中先创建一个大的div，并且它是绝对定位的，层能高点；
在这个div里创建很多小的dom元素，该dom元素分为方块、横向的、纵向的三种形式，将这三种形式的dom元素以集合的形式加进去

在主页面中需调用封装的代码块：

$("#block").ImageBanner();

新建一个名为silderImage.js的文件：

文件中使用自执行函数，函数中引入jQuery封装方法、函数封装类对象、封装动画的相关属性、封装初始化的方法、创建dom元素的方法、排图片索引的方法、开始动画的方法、当前的dom元素节点。
jQuery封装方法$.fn.ImageBanner：
（1）接收函数的执行对象（即获取当前的dom元素#block）；
（2）实例化函数封装类对象（将接收到的执行对象elements作为实参传给实例化的对象上）；
（3）执行封装的初始化方法
函数封装类对象silderImage：
（1）以面向对象的封装方式执行，可创建一个匿名函数（将ele作为形参接收，ele即为元素的dom对象this.element = ele;，把它存给对象的属性，后面用时可直接调属性）；
（2）定义一个大的空div（即silderParent）；
（3）定义一个空集合（即item），存放三种形式的dom元素；
（4）将图片存为一个属性（即image）
封装动画的相关属性silderImage.prototype.options：宽、高、列数、行数、计时器的总时间、图片淡入淡出的时间、动画的名称
封装初始化的方法silderImage.prototype._init：执行后续创建dom元素、排图片索引、开始动画的方法。
封装创建dom元素的方法silderImage.prototype._create：
（1）创建一个大div，相当于一个父容器（即silderParent），将其加给element（即#block）；
（2）创建方块（定义一个名为square的空字符串，循环遍历行与列后给该字符串拼接一个div），将其加给集合（item[0]）；
（3）创建水平方向的竖条（定义一个名为Hodom的空字符串，循环遍历列后给该字符串拼接一个div），将其加给集合（item[1]）；
（4）创建垂直方向的横条（定义一个名为Vedom的空字符串，循环遍历行后给该字符串拼接一个div），将其加给集合（item[2]）
封装排图片索引的方法silderImage.prototype._setindex：
（1）根据z-index排图片索引，拿到每张图片后遍历每张图片，改变其索引层；
（2）除过图片的第一张，其余设置为隐藏
封装开始动画的方法silderImage.prototype._play：
（1）图片的淡入淡出动画：通过计时器控制第一张图片淡出（动画完成后，更新集合里的图片，将自身索引层改为下一张图的索引层，并将自身加给最后一张图片的后面），第二张图片淡入（动画完成后，更新集合里的图片）；
（2）随机一组动画的dom元素：将三种形式的dom元素动画加给大的div
封装动画效果并执行$.animateinfo：
（1） animateinfo相当于调用方法，执行方法，方法里面传了一个枚举对象作为形参，在其中可写全部动画；
（2）方法的函数体，即需调用的动画，在其中进行对象的合并
dom元素进入页面的同时去执行dom元素的动画：先随机出dom动画的名称，拿动画的名称去枚举对象里拿枚举对象，再取它的函数，再执行动画的函数
给每个块添加下一张图that.silderParent.children().each()：随机一组动画的dom元素后，每个块里的内容是空的，此时需给块添加下一张图，使得下一张图刷出来时是以块的动画出来的9（获取背景图片的地址，改其坐标，元素大小）

二、代码块
主页面：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #block{
            position: relative;
            width: 800px;
            height: 400px;
            border: 1px solid silver;
            margin: 0 auto;
        }
        .image{
            width: 800px;
            height: 400px;
        }
        .image img{
            position: absolute;
            width: 800px;
            height: 400px;
        }
        .parentdom>div{
            border: 1px solid #ffbe1b;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<div id="block">
    <div class="image">
        <img src="img/1.jpg">
        <img src="img/2.jpg">
        <img src="img/3.jpg">
        <img src="img/4.jpg">
        <img src="img/5.jpg">
        <img src="img/6.jpg">
    </div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="modeljs/silderImage.js"></script>
<script>
    //调用封装的代码块
    $("#block").ImageBanner();
</script>
</body>
</html>

silderImage.js：

(function ($) {
    //jQuery封装方法
    $.fn.ImageBanner = function () {
        var elements = $(this);
        var instances = new silderImage(elements);
        instances._init();
    }
    //效果
    var effects = {}
    //函数封装类对象
    var silderImage = function (ele) {
        this.element = ele;
        this.item = [];
        this.silderParent = null;
        this.image = null;
        this.index = 0;
        this.nowdom = null;
    }
    //动画的相关属性
    silderImage.prototype.options = {
        width: 800,
        height: 400,
        Hov: 20,
        Ver: 10,
        times: 4000,
        speed: 2000,
        domspeed: 900,
        //动画的名称
        animate: [
            'fadeTop'
        ]
    }
    //封装初始化的方法
    silderImage.prototype._init = function () {
        this._create();
        this._setindex();
        this._play();
    }
    //封装一个排图片索引的方法
    silderImage.prototype._setindex = function () {
        var that = this;
        //that.element指dom元素的父节点[div#block]
        that.image = that.element.find("img");
        that.image.each(function (index) {
            $(this).css("zIndex", that.image.length - index - 1);
        });
        that.image.not(that.image.eq(0)).css("display", "none");
    }
    //封装一个开始动画的方法
    silderImage.prototype._play = function () {
        var that = this;
        setInterval(function () {
            //随机一组动画的dom元素
            that.nowdom = that.item[that.index];  //当前的dom元素节点
            that.silderParent.html(that.nowdom);
            //给每个块添加下一张图
            that.silderParent.children().each(function () {
                var left = $(this).css("left");
                var top = $(this).css("top");
                $(this).css({
                    "backgroundImage": "url(" + that.image.eq(1).attr("src") + ")",
                    "backgroundSize": that.options.width + "px " + that.options.height + "px",
                    "backgroundPosition": (-parseInt(left)) + "px " + (-parseInt(top)) + "px"
                });
            });
            //随机一组动画
            /*var animateindex=Math.floor(Math.random()*that.options.animate.length);
             var effectsname=that.options.animate[animateindex];  //效果的名称*/
            var effectsname = that.options.animate[0];
            effects[effectsname].call(that)
            that.index++;
            if (that.index > that.item.length - 1) {
                that.index = 0;
            }
            //图片的淡入淡出动画
            that.image.eq(0).fadeOut(that.options.speed, function () {
                that.image = that.element.find("img");  //页面元素的图片已经变化，但集合里的没变，因此需将集合里的图片更新，下一次进来的第零个是变过的第零个
                $(this).parent().append($(this));
            });
            that.image.eq(1).fadeIn(that.options.speed, function () {
                that.image = that.element.find("img");
            });
        }, that.options.times);
    }
    //方法的函数体  需调用的动画
    $.animateinfo = function () {
        //对象的合并
        effects = $.extend({}, effects, arguments[0]);
    }
    //封装一个创建dom元素的方法
    silderImage.prototype._create = function () {
        var that = this;
        //创建一个大块，相当于一个父容器
        that.silderParent = $("<div class='parentdom' style='position: absolute;top: 0;left: 0;z-index:10;width: " + that.options.width + "px;height:" + that.options.height + "px'></div>");
        that.element.append(that.silderParent);

        //创建方块
        var square = "";
        for (var i = 0; i < that.options.Ver; i++) {
            for (var k = 0; k < that.options.Hov; k++) {
                square += "<div style='width:40px;height:40px;position: absolute;left:" + k * 40 + "px;top:" + i * 40 + "px'></div>";
            }
        }
        that.item[0] = square;

        //创建竖的
        var Hodom = "";
        for (var i = 0; i < that.options.Hov; i++) {
            Hodom += "<div style='width:40px;height:" + that.options.height + "px;position:absolute;left: " + i * 40 + "px;top:0px'></div>";
        }
        that.item[1] = Hodom;

        //创建横的
        var Vedom = "";
        for (var i = 0; i < that.options.Ver; i++) {
            Vedom += "<div style='width:" + that.options.width + "px;height:40px;position: absolute;left: 0px;top: " + i * 40 + "px'></div>";
        }
        that.item[2] = Vedom;
    }
    //函数自身  可写全部的动画  效果的代码
    $.animateinfo({
        'fadeTop': function () {
            var that = this, dom = that.silderParent;
            dom.children("div").css("opacity", 0).each(function (index) {
                $(this).delay(index * 35).animate({
                    opacity: 1
                }, that.options.domspeed / 3);
            });
        }
    });
})(jQuery);

三、遇到的问题及解决方案
1.问题：其同胞兄弟的zIndex为自身层加1时，除最后一张图片索引值为0，其余图片索引值一直在加1
思路：计时器控制第一张图片淡出，动画完成后将自身加给最后一张图片之后，设置自身的zIdex为0，其同胞兄弟的zIndex为自身层加1
代码如下：

that.image.eq(0).fadeOut(that.options.speed,function(){
         $(this).parent().append($(this));
         $(this).css("zIndex",0).siblings().each(function(){
              $(this).css("zIndex",parseInt($(this).css("zIndex"))+1);
         });
});

原因：页面元素的图片已经变化，但集合里的没变
解决思路：动画完成后，更新集合里的图片，将自身索引层改为下一张图的索引层，并将自身加给最后一张图片的后面
解决方法：淡入与淡出动画执行完成之后，将集合里的图片更新（重新找图片），下一次进来的第0个是变过的第0个
改后代码：

that.image.eq(0).fadeOut(that.options.speed,function(){
         that.image=that.element.find("img");  
         $(this).parent().append($(this));
});
that.image.eq(1).fadeIn(that.options.speed,function(){
         that.image=that.element.find("img");
});

2.问题：dom元素的动画只闪了一下，并没有相互切换的效果
解决方法：将创建的大div的层调高
代码：

that.silderParent = $("<div class='parentdom' style='position: absolute;top: 0;left: 0;z-index:10;width: " + that.options.width + "px;height:" + that.options.height + "px'></div>");

3.问题：Cannot read property ‘call’ of undefined
代码如下：

$.animteinfo = function () {
        //对象的合并
         $.extend({}, effects, arguments[0]);
}

解决方法：合并完之后有返回值
改后代码：

$.animteinfo = function () {
        effects = $.extend({}, effects, arguments[0]);
}

易安sparkle

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用jQuery封装图片轮播

一、思路需考虑两个问题：1.在调用的情况下，代码块自己可以跑起来2.在调用的情况下，用户赋予其新的参数，也可以跑起来效果及实现思路：定义一个大块；在其中先创建一个大的div，并且它是绝对定位的，层能高点；在这个div里创建很多小的dom元素，该dom元素分为方块、横向的、纵向的三种形式，将这三种形式的dom元素以集合的形式加进去在主页面中需调用封装的代码块：$...
复制链接

扫一扫