html轮播底部圆点怎么做,图片轮播右下角的小圆点怎么加上去?
小圆点的html代码
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
html轮播底部圆点怎么做,图片轮播右下角的小圆点怎么加上去?相关推荐
- 用C#做图片轮播效果
用C#做图片轮播效果 老帅 在C#中做图片轮播效果,不借助第三方控件,也是可以实现的.使用PictureBox作为图片展示容器就可以.但是图片列表放在什么地方,如何加载,需要考虑一下! 1 ...
- html5ul消除圆点,overflow清楚浮动 + 去掉li标签的小圆点
原文链接:http://blog.163.com/qqabc20082006@126/blog/static/22928525201031211212955/ 测试用例: 无标题文档 #wrapper ...
- 轮播图切换圆点html,jQuery插件实现带圆点的焦点图片轮播切换
这次分享的代码是jQuery插件,HovertreeImg是一个图片轮播jquery插件,使用方便,可以设置大小,圆点位置等,代码简洁 #img img{width:100%;height:100%; ...
- android 图片轮播圆点,简单的图片轮播 加小圆点
先说一下思路,使用ViewPager加 LinearLayout 布局 共同实现, 先看布局 android:layout_width="match_parent" androi ...
- 怎么做轮播图中的小圆点html,JQuery和html+css实现带小圆点和左右按钮的轮播图实例...
是的!你没看错!还是轮播图.这次的JQuery的哟!! CSS代码: /*轮播图 左右按钮 小白点*/ #second_div{ margin-top: 160px; } .img_box{ over ...
- android 图片轮播组件,Android客户端实现图片轮播控件
本文和大家一起写一个Android图片轮播控件,供大家参考,具体内容如下 1. 轮播控件的组成部分 我们以知乎日报Android客户端的轮播控件为例,分析一下轮播控件的主要组成: 首先我们要有用来显示 ...
- vue 实现无限轮播_使用Vue制作图片轮播组件思路详解
之前一直都没有认真的写过一个组件.以前在写业务代码的过程中,都是用的别人封装好的组件,这次尝试着写了一个图片轮播组件,虽然比不上知名的轮播组件,但它的功能基本完整,而且在写这个组件的过程中,学的东西也 ...
- android 自适应图片轮播,Android使用Recyclerview实现图片轮播效果的方法
Android使用Recyclerview实现图片轮播效果的方法 发布时间:2020-06-23 15:47:58 来源:亿速云 阅读:113 作者:清晨 这篇文章将为大家详细讲解有关Android使 ...
- html 旋转木马 轮播,JS实现旋转木马式图片轮播效果
本文实例为大家分享了js图片轮播的具体代码,供大家参考,具体内容如下 主要html代码: Document function $(id){ return document.getElementById ...
最新文章
- 这38篇原创文章,带我入门深度学习!
- 嵌入式编程C语言提高代码效率的14种方法
- 设计模式之 - 代理模式(Proxy Pattern)
- 2019年最流行的七大编程语言:学习编程,你会选择哪一种语言呢?
- 原来MySQL面试还会问这些...
- dreamweaver开源_Dreamweaver的7种开源替代品
- 使用IOCP需要注意的一些问题~~(不断补充)
- EBS系统请求表定时清除
- 简单计算器代码(含加减乘除取余5个操作)
- 手机显示服务器被重置连接断开,手机服务器链接被重置
- 森林防火火灾漫延算法 火灾推演算法分析 火灾蔓延范围计算方法 森林火灾边界漫延计算方法
- 【英语】美式元音 总结
- 清华大学计算机系学几年,清华大学16位学霸简历吓坏网友
- Ubuntu 20.04 物理机安装
- [黑苹果]炫龙毁灭者DC显卡无解
- 碧光の鎌使い(シュゼット) / 碧镰(异时层中二)
- 6000字长文,带你用Python完成 “Excel合并(拆分)” 的各种操作!
- 【图像分割】基于贝叶斯算法阙值图像分割matlab代码
- 在Geany里配置python3的方法!!!含window10下载Geany过程
- apache php gzip压缩输出的实现方法
热门文章
- 石油大c语言答案,中国石油大学C语言上机题答案(2013版)答案 最全最详细
- 多方隐私集合求交高效算法解读
- 工信部:WiFi 万能钥匙和 WiFi 钥匙等涉嫌危害用户信息
- 探花交友_第4章_圈子功能实现
- 烘培食品厂如何实现远程监控和故障报警
- 如何实现关键词的自动分类
- 425 Can‘t open data connection for transfer of “/“
- markdown_markdown制作幻灯片ppt的若干方式(marp/slidev)markdow_slidev+vscode
- 5月刊精彩推荐:云安全:云计算的安全风险、模型和策略
- 电网招聘考试其他工学类难吗?考什么?怎么备考?