轮播图js

Leo_chen 发布于2019-08-23 16:43 / 612人阅读

摘要：匿名函数自执行外层的盒子下面所有的左侧按钮右侧按钮添加一个控制变量动画时间盒子宽高图片数组属性图片数组长度初始化事件监听拿到下的所有最外层盒子的的的的多带带设置默认第一张图片初始化左右按钮初始化下面拿到下的所有的的左侧按钮右侧按钮自己

// 匿名函数自执行
(function() {
    function Carsouel(json) {
        // 外层的盒子
        this.$dom = $("#"+json.id);
        // ul
        this.$ul = null;
        // ul下面所有的li
        this.$ullis = null;
        // 左侧按钮
        this.$left = null;
        // 右侧按钮
        this.$right = null;
        this.$ol = null;
        this.$ollis = null;
        // 添加一个控制变量
        this.idx = 0;
        // 动画时间
        this.animateTime = json.animateTime;
        // 盒子宽高
        this.width = json.width;
        this.height = json.height;
        // 图片数组属性
        this.imgArr = json.images;
        // 图片数组长度
        this.imgArrLength = json.images.length;
        // 初始化
        this.init();
        // 事件监听
        this.bindEvent();
    }

    Carsouel.prototype.init = function() {
        this.$ul = $("");
        for(var i=0; i"));
        }
        this.$dom.append(this.$ul);
        // 拿到ul下的所有li
        this.$ullis = this.$ul.find("li");
        // 最外层盒子的css
        this.$dom.css({
            "position":"relative",
            "width": this.width,
            "height": this.height,
            "margin": "0 auto",
            "border": "1px solid gray",
            "overflow": "hidden"
        });
        // ul的css
        var _this = this;
        this.$ul.css({
            "position":"absolute",
            "width": _this.width,
            "height": _this.height
        });
        // ul的li的css
        this.$ullis.css({
            "position":"absolute",
            "left":_this.width
        });
        // 多带带设置默认第一张图片
        this.$ullis.eq(0).css({
            "left": 0
        });
        // 初始化左右按钮
        this.$left = $("<");
        this.$right = $(">");
        this.$dom.append(this.$left);
        this.$dom.append(this.$right);
        // 初始化下面ol
        this.$ol = $("");
        for(var i=0; i"));
        }
        this.$dom.append(this.$ol);
        // 拿到ol下的所有li
        this.$ollis = this.$ol.find("li");
        this.$ol.css({
            "position":"absolute",
            "bottom": 10,
            "left": 400,
            "list-style":"none" 
        });
        // ol的li的css
        this.$ollis.css({
            "float": "left",
            "width": 50,
            "height": 50,
            "margin-left":10 
        });
        this.$ollis.eq(0).addClass("active");
    }
    Carsouel.prototype.bindEvent = function() {
        var _this = this;
        // 左侧按钮
        this.$left.click(function() {
            _this.$ullis.eq(_this.idx).animate({"left":_this.width},_this.animateTime);
            _this.idx++;
            if (_this.idx > _this.imgArrLength-1) {
                _this.idx = 0;
            }
            _this.$ullis.eq(_this.idx).css({
                "left":-_this.width
            }).animate({"left":0},_this.animateTime);
        });
        // 右侧按钮 自己完成

        // 下面的ol的li事件绑定
        this.$ollis.click(function() {
            // 点击哪个 显示哪张图片
            var old = _this.idx;
            var num = $(this).index();
            _this.idx = num;
            if (num==old) {
                return;
            }
            console.log(num,old);
            _this.$ullis.eq(old).css({
                "left": 0
            }).animate({"left":-_this.width},_this.animateTime);
            _this.$ullis.eq(num).css({
                "left": _this.width
            }).animate({"left":0},_this.animateTime);
            // 对应样式
            _this.$ollis.eq(num).addClass("active").siblings().removeClass("active");
        })

    }
    window.Carsouel = Carsouel;
})();

GPU云服务器云服务器 js轮播图视频 js焦点轮播图轮播图鼠标悬浮js js写的全屏轮播图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103180.html

原生js写一个无缝轮播图插件(支持vue)

摘要：轮播图插件前言写这个插件的原因前段时间准备用加上网易云的接口，模拟网易云音乐移动端。目前主要实现了无缝轮播，自动播放，端左右按钮点击切换，移动端手势滑动切换。轮播图插件(Broadcast.js) 前言：写这个插件的原因前段时间准备用vue加上网易云的nodejs接口，模拟网易云音乐移动端。因为想自己写一遍所有的代码以及加固自己的flex布局，所以没有使用UI组件。在轮播图部分，...

MSchumi 2019-08-02 16:03 评论0 收藏0
原生js写一个无缝轮播图插件(支持vue)

摘要：轮播图插件前言写这个插件的原因前段时间准备用加上网易云的接口，模拟网易云音乐移动端。目前主要实现了无缝轮播，自动播放，端左右按钮点击切换，移动端手势滑动切换。轮播图插件(Broadcast.js) 前言：写这个插件的原因前段时间准备用vue加上网易云的nodejs接口，模拟网易云音乐移动端。因为想自己写一遍所有的代码以及加固自己的flex布局，所以没有使用UI组件。在轮播图部分，...

hatlonely 2019-08-22 18:09 评论0 收藏0
原生js写一个无缝轮播图插件(支持vue)

摘要：轮播图插件前言写这个插件的原因前段时间准备用加上网易云的接口，模拟网易云音乐移动端。目前主要实现了无缝轮播，自动播放，端左右按钮点击切换，移动端手势滑动切换。轮播图插件(Broadcast.js) 前言：写这个插件的原因前段时间准备用vue加上网易云的nodejs接口，模拟网易云音乐移动端。因为想自己写一遍所有的代码以及加固自己的flex布局，所以没有使用UI组件。在轮播图部分，...

褰辩话 2019-08-30 15:53 评论0 收藏0
实现简单的轮播图

摘要：小练习轮播图组件任务描述在和上一任务同一目录下面创建一个文件，在目录中创建，并在其中编码，实现一个轮播图的功能。实现思路考察对节点，定时器，事件的处理。小练习3：轮播图组件任务描述在和上一任务同一目录下面创建一个task0002_3.html文件，在js目录中创建task0002_3.js，并在其中编码，实现一个轮播图的功能。图片数量及URL均在HTML中写好可以配置轮播的顺...

EsgynChina 2019-08-22 10:39 评论0 收藏0
原生 js 实现移动端 Touch 轮播图

摘要：轮播图轮播图其实就是通过手指的滑动，来左右切换轮播图，下面我们通过一个案例，来实现下。结构结构上，还是用来存放轮播图片，来存放轮播小圆点样式初始化的一些标签，都会有一些默认样式，比如标签默认是有一个边距的，为了不影响美观，我们需要清除掉。 showImg(https://segmentfault.com/img/remote/1460000017719408?w=1920&h=1080...

Elle 2019-08-23 14:27 评论0 收藏0