图片轮播右下角的小圆点怎么加上去？

小圆点的html代码

    <div class="mui-slider-indicator">  
                <div class="mui-indicator mui-active"></div>  
                <div class="mui-indicator"></div>  
                <div class="mui-indicator"></div>  
                <div class="mui-indicator"></div>  
            </div>

mui默认轮播图小圆点的mui.min.css里面的css样式代码

.mui-slider-indicator {  
    position: absolute;  
    bottom: 8px;  
    width: 100%;  
    text-align: center;  
    background: 0 0  
}  

.mui-slider-indicator.mui-segmented-control {  
    position: relative;  
    bottom: auto  
}  

.mui-slider-indicator .mui-indicator {  
    display: inline-block;  
    width: 6px;  
    height: 6px;  
    margin: 1px 6px;  
    cursor: pointer;  
    border-radius: 50%;  
    background: #aaa;  
    -webkit-box-shadow: 0 0 1px 1px rgba(130,130,130,.7);  
    box-shadow: 0 0 1px 1px rgba(130,130,130,.7)  
}  

.mui-slider-indicator .mui-active.mui-indicator {  
    background: #fff  
}  

.mui-slider-indicator .mui-icon {  
    font-size: 20px;  
    line-height: 30px;  
    width: 40px;  
    height: 30px;  
    margin: 3px;  
    text-align: center;  
    border: 1px solid #ddd  
}  

.mui-slider-indicator .mui-number {  
    line-height: 32px;  
    display: inline-block;  
    width: 58px  
}  

.mui-slider-indicator .mui-number span {  
    color: #ff5053  
}  

mui默认轮播图的mui.min.js里面的js代码

var c = "mui-slider",  
        d = "mui-slider-group",  
        e = "mui-slider-loop",  
        f = "mui-action-previous",  
        g = "mui-action-next",  
        h = "mui-slider-item",  
        i = "mui-active",  
        j = "." + h,  
        k = ".mui-slider-progress-bar",  
        l = a.Slider = a.Scroll.extend({  
            init: function(b, c) {  
                this._super(b, a.extend(!0, {  
                    fingers: 1,  
                    interval: 0,  
                    scrollY: !1,  
                    scrollX: !0,  
                    indicators: !1,  
                    scrollTime: 1e3,  
                    startX: !1,  
                    slideTime: 0,  
                    snap: j  
                }, c)), this.options.startX  
            },  
            _init: function() {  
                this._reInit(), this.scroller && (this.scrollerStyle = this.scroller.style, this.progressBar = this.wrapper.querySelector(k), this.progressBar && (this.progressBarWidth = this.progressBar.offsetWidth, this.progressBarStyle = this.progressBar.style), this._super(), this._initTimer())  
            },  
            _triggerSlide: function() {  
                var b = this;  
                b.isInTransition = !1;  
                b.currentPage;  
                b.slideNumber = b._fixedSlideNumber(), b.loop && (0 === b.slideNumber ? b.setTranslate(b.pages[1][0].x, 0) : b.slideNumber === b.itemLength - 3 && b.setTranslate(b.pages[b.itemLength - 2][0].x, 0)), b.lastSlideNumber != b.slideNumber && (b.lastSlideNumber = b.slideNumber, b.lastPage = b.currentPage, a.trigger(b.wrapper, "slide", {  
                    slideNumber: b.slideNumber  
                })), b._initTimer()  
            },  
            _handleSlide: function(b) {  
                var c = this;  
                if (b.target === c.wrapper) {  
                    var d = b.detail;  
                    d.slideNumber = d.slideNumber || 0;  
                    for (var e = c.scroller.querySelectorAll(j), f = [], g = 0, h = e.length; h > g; g++) {  
                        var k = e[g];  
                        k.parentNode === c.scroller && f.push(k)  
                    }  
                    var l = d.slideNumber;  
                    if (c.loop && (l += 1), !c.wrapper.classList.contains("mui-segmented-control")) for (var g = 0, h = f.length; h > g; g++) {  
                        var k = f[g];  
                        k.parentNode === c.scroller && (g === l ? k.classList.add(i) : k.classList.remove(i))  
                    }  
                    var m = c.wrapper.querySelector(".mui-slider-indicator");  
                    if (m) {  
                        m.getAttribute("data-scroll") && a(m).scroll().gotoPage(d.slideNumber);  
                        var n = m.querySelectorAll(".mui-indicator");  
                        if (n.length > 0) for (var g = 0, h = n.length; h > g; g++) n[g].classList[g === d.slideNumber ? "add" : "remove"](i);  
                        else {  
                            var o = m.querySelector(".mui-number span");  
                            if (o) o.innerText = d.slideNumber + 1;  
                            else for (var p = m.querySelectorAll(".mui-control-item"), g = 0, h = p.length; h > g; g++) p[g].classList[g === d.slideNumber ? "add" : "remove"](i)  
                        }  
                    }  
                    b.stopPropagation()  
                }  
            },  
            _handleTabShow: function(a) {  
                var b = this;  
                b.gotoItem(a.detail.tabNumber || 0, b.options.slideTime)  
            },  
            _handleIndicatorTap: function(a) {  
                var b = this,  
                    c = a.target;  
                (c.classList.contains(f) || c.classList.contains(g)) && (b[c.classList.contains(f) ? "prevItem" : "nextItem"](), a.stopPropagation())  
            },  
            _initEvent: function(b) {  
                var c = this;  
                c._super(b);  
                var d = b ? "removeEventListener" : "addEventListener";  
                c.wrapper[d]("slide", this), c.wrapper[d](a.eventName("shown", "tab"), this)  
            },  
            handleEvent: function(b) {  
                switch (this._super(b), b.type) {  
                case "slide":  
                    this._handleSlide(b);  
                    break;  
                case a.eventName("shown", "tab"):  
                    ~this.snaps.indexOf(b.target) && this._handleTabShow(b)  
                }  
            },  
            _scrollend: function(a) {  
                this._super(a), this._triggerSlide(a)  
            },  
            _drag: function(a) {  
                this._super(a);  
                var c = a.detail.direction;  
                if ("left" === c || "right" === c) {  
                    var d = this.wrapper.getAttribute("data-slidershowTimer");  
                    d && b.clearTimeout(d), a.stopPropagation()  
                }  
            },  
            _initTimer: function() {  
                var a = this,  
                    c = a.wrapper,  
                    d = a.options.interval,  
                    e = c.getAttribute("data-slidershowTimer");  
                e && b.clearTimeout(e), d && (e = b.setTimeout(function() {  
                    c && ((c.offsetWidth || c.offsetHeight) && a.nextItem(!0), a._initTimer())  
                }, d), c.setAttribute("data-slidershowTimer", e))  
            },  
            _fixedSlideNumber: function(a) {  
                a = a || this.currentPage;  
                var b = a.pageX;  
                return this.loop && (b = 0 === a.pageX ? this.itemLength - 3 : a.pageX === this.itemLength - 1 ? 0 : a.pageX - 1), b  
            },  
            _reLayout: function() {  
                this.hasHorizontalScroll = !0, this.loop = this.scroller.classList.contains(e), this._super()  
            },  
            _getScroll: function() {  
                var b = a.parseTranslateMatrix(a.getStyles(this.scroller, "webkitTransform"));  
                return b ? b.x : 0  
            },  
            _transitionEnd: function(b) {  
                b.target === this.scroller && this.isInTransition && (this._transitionTime(), this.isInTransition = !1, a.trigger(this.wrapper, "scrollend", this))  
            },  
            _flick: function(a) {  
                if (this.moved) {  
                    var b = a.detail,  
                        c = b.direction;  
                    this._clearRequestAnimationFrame(), this.isInTransition = !0, "flick" === a.type ? (b.deltaTime < 200 && (this.x = this._getPage(this.slideNumber + ("right" === c ? -1 : 1), !0).x), this.resetPosition(this.options.bounceTime)) : "dragend" !== a.type || b.flick || this.resetPosition(this.options.bounceTime), a.stopPropagation()  
                }  
            },  
            _initSnap: function() {  
                if (this.scrollerWidth = this.itemLength * this.scrollerWidth, this.maxScrollX = Math.min(this.wrapperWidth - this.scrollerWidth, 0), this._super(), this.currentPage.x) this.slideNumber = this._fixedSlideNumber(), this.lastSlideNumber = "undefined" == typeof this.lastSlideNumber ? this.slideNumber : this.lastSlideNumber;  
                else {  
                    var a = this.pages[this.loop ? 1 : 0];  
                    if (a = a || this.pages[0], !a) return;  
                    this.currentPage = a[0], this.slideNumber = 0, this.lastSlideNumber = "undefined" == typeof this.lastSlideNumber ? 0 : this.lastSlideNumber  
                }  
                this.options.startX = this.currentPage.x || 0  
            },  
            _getSnapX: function(a) {  
                return Math.max(-a, this.maxScrollX)  
            },  
            _getPage: function(a, b) {  
                return this.loop ? a > this.itemLength - (b ? 2 : 3) ? (a = 1, time = 0) : (b ? -1 : 0) > a ? (a = this.itemLength - 2, time = 0) : a += 1 : (b || (a > this.itemLength - 1 ? (a = 0, time = 0) : 0 > a && (a = this.itemLength - 1, time = 0)), a = Math.min(Math.max(0, a), this.itemLength - 1)), this.pages[a][0]  
            },  
            _gotoItem: function(b, c) {  
                this.currentPage = this._getPage(b, !0), this.scrollTo(this.currentPage.x, 0, c, this.options.scrollEasing), 0 === c && a.trigger(this.wrapper, "scrollend", this)  
            },  
            setTranslate: function(a, b) {  
                this._super(a, b);  
                var c = this.progressBar;  
                c && (this.progressBarStyle.webkitTransform = this._getTranslateStr(-a * (this.progressBarWidth / this.wrapperWidth), 0))  
            },  
            resetPosition: function(a) {  
                return a = a || 0, this.x > 0 ? this.x = 0 : this.x < this.maxScrollX && (this.x = this.maxScrollX), this.currentPage = this._nearestSnap(this.x), this.scrollTo(this.currentPage.x, 0, a, this.options.scrollEasing), !0  
            },  
            gotoItem: function(a, b) {  
                this._gotoItem(a, "undefined" == typeof b ? this.options.scrollTime : b)  
            },  
            nextItem: function() {  
                this._gotoItem(this.slideNumber + 1, this.options.scrollTime)  
            },  
            prevItem: function() {  
                this._gotoItem(this.slideNumber - 1, this.options.scrollTime)  
            },  
            getSlideNumber: function() {  
                return this.slideNumber || 0  
            },  
            _reInit: function() {  
                for (var a = this.wrapper.querySelectorAll("." + d), b = 0, c = a.length; c > b; b++) if (a[b].parentNode === this.wrapper) {  
                    this.scroller = a[b];  
                    break  
                }  
                this.scrollerStyle = this.scroller && this.scroller.style, this.progressBar && (this.progressBarWidth = this.progressBar.offsetWidth, this.progressBarStyle = this.progressBar.style)  
            },  
            refresh: function(b) {  
                b ? (a.extend(this.options, b), this._super(), this._initTimer()) : this._super()  
            },  
            destroy: function() {  
                this._initEvent(!0), delete a.data[this.wrapper.getAttribute("data-slider")], this.wrapper.setAttribute("data-slider", "")  
            }  
        });  
    a.fn.slider = function(b) {  
        var d = null;  
        return this.each(function() {  
            var e = this;  
            if (this.classList.contains(c) || (e = this.querySelector("." + c)), e && e.querySelector(j)) {  
                var f = e.getAttribute("data-slider");  
                f ? (d = a.data[f], d && b && d.refresh(b)) : (f = ++a.uuid, a.data[f] = d = new l(e, b), e.setAttribute("data-slider", f))  
            }  
        }), d  
    }, a.ready(function() {  
        a(".mui-slider").slider(), a(".mui-scroll-wrapper.mui-slider-indicator.mui-segmented-control").scroll({  
            scrollY: !1,  
            scrollX: !0,  
            indicators: !1,  
            snap: ".mui-control-item"  
        })  
    })

这是我的网站，O(∩_∩)O谢谢支持----->>中旋网ZxlmWeb