4***@qq.com
4***@qq.com
  • 发布:2017-06-02 09:17
  • 更新:2017-06-02 10:32
  • 阅读:6265

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

分类:MUI

图片轮播右下角或者中间会有几个小圆点指示轮播到哪张图片的,但在mui的文档里没找到!请指教!!很急!!

2017-06-02 09:17 负责人:无 分享
已邀请:
LLgg

LLgg

小圆点的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

  • 4***@qq.com (作者)

    非常感谢!


    2017-06-02 10:46

  • LLgg

    回复 4***@qq.com:赠送点积分给我ヾ(๑╹◡╹)ノ"


    2017-06-02 10:56

该问题目前已经被锁定, 无法添加新回复