Yang's Blog

滑动切换

发表于

这是一个比较有趣的滑动切换效果，代码量非常的少，是通过JavaScript控制CSS3的一些属性来实现的一个效果

操作也是十分简单，引入JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
new Yang()
// 或者
new Yang({
	selector: '.yang',
	duration: 200,
	easing: 'ease-out',
	perPage: 1,
	startIndex: 0,
	draggable: true,
	threshold: 20,
	loop: false,
})

参数的设置：

  • selector - （ string 或 DOM 元素）指定选择器
  • duration - （ number ）载玻片转移持续时间（以ms为单位）
  • easing - （ string ）与 CSS 中的 transition-timing-function 相同
  • perPage - （ number 或 object ）要显示的幻灯片数
  • startIndex - 起始滑块的（ number ）索引（从零开始）
  • draggable - （ boolean ）使用拖动和触摸滑动
  • threshold - （ number ）触摸和鼠标拖动阈值（以px为单位）
  • loop - （ boolean ）循环幻灯片

API方法的设置：

  • next(howManySlides = 1) - 转到下一张幻灯片（可选多个）
  • prev(howManySlides = 1) - 转到上一张幻灯片（可选多个）
  • goTo(index) - 转到特定幻灯片
  • destroy() - 删除所有活动的侦听器
  • currentSlide - 当前活动幻灯片的索引（只读）

适用范围：

  • pc端
  • 移动端

兼容性：

  • IE10+
  • Chrome 12+
  • Firefox 16+
  • Opera 15+
  • Safari 4+
  • Android Browser 4.0+
  • iOS Safari 6.0+

HTML代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="yang">
	<span>操蛋的人生······  No.1</span>
	<span>操蛋的人生······  No.2</span>
	<span>操蛋的人生······  No.3</span>
	<span>操蛋的人生······  No.4</span>
	<span>操蛋的人生······  No.5</span>
	<span>操蛋的人生······  No.6</span>
	<span>操蛋的人生······  No.7</span>
	<span>操蛋的人生······  No.8</span>
	<span>操蛋的人生······  No.9</span>
	<span>操蛋的人生······  No.10</span>
</div>
<!-- 下面是操作API 删除无影响 -->
<div id="next" style="float: left;padding: 5px;">next</div>
<div id="prev" style="float: left;padding: 5px;">prev</div>
<div id="goTo" style="float: left;padding: 5px;">goTo</div>
<div id="destroy" style="float: left;padding: 5px;">destroy</div>

JavaScript代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
// 滑动切换
+function(e, t) {
	"object" == typeof exports && "object" == typeof module ? module.exports = t() : "function" == typeof define && define.amd ? define("Yang", [], t) : "object" == typeof exports ? exports.Yang = t() : e.Yang = t()
}(this, function() {
	return function(e) {
		function t(r) {
			if (i[r]) return i[r].exports;
			var s = i[r] = {
				i: r,
				l: !1,
				exports: {}
			};
			return e[r].call(s.exports, s, s.exports, t), s.l = !0, s.exports
		}
		var i = {};
		return t.m = e, t.c = i, t.i = function(e) {
			return e
		}, t.d = function(e, i, r) {
			t.o(e, i) || Object.defineProperty(e, i, {
				configurable: !1,
				enumerable: !0,
				get: r
			})
		}, t.n = function(e) {
			var i = e && e.__esModule ?
			function() {
				return e.
			default
			} : function() {
				return e
			};
			return t.d(i, "a", i), i
		}, t.o = function(e, t) {
			return Object.prototype.hasOwnProperty.call(e, t)
		}, t.p = "", t(t.s = 0)
	}([function(e, t, i) {
		"use strict";
		function r(e, t) {
			if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function（不能把class当成function）")
		}
		Object.defineProperty(t, "__esModule", {
			value: !0
		});
		var s = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ?
		function(e) {
			return typeof e
		} : function(e) {
			return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol" : typeof e
		}, n = function() {
			function e(e, t) {
				for (var i = 0; i < t.length; i++) {
					var r = t[i];
					r.enumerable = r.enumerable || !1, r.configurable = !0, "value" in r && (r.writable = !0), Object.defineProperty(e, r.key, r)
				}
			}
			return function(t, i, r) {
				return i && e(t.prototype, i), r && e(t, r), t
			}
		}(), o = function() {
			function e(t) {
				var i = this;
				r(this, e), this.config = this.mergeSettings(t), this.selector = "string" == typeof this.config.selector ? document.querySelector(this.config.selector) : this.config.selector, this.selectorWidth = this.selector.getBoundingClientRect().width, this.innerElements = [].slice.call(this.selector.children), this.currentSlide = this.config.startIndex, this.transformProperty = this.webkitOrNot(), this.init(), ["resizeHandler", "touchstartHandler", "touchendHandler", "touchmoveHandler", "mousedownHandler", "mouseupHandler", "mouseleaveHandler", "mousemoveHandler"].forEach(function(e) {
					i[e] = i[e].bind(i)
				}), window.addEventListener("resize", this.resizeHandler), this.config.draggable && (this.pointerDown = !1, this.drag = {
					start: 0,
					end: 0
				}, this.selector.addEventListener("touchstart", this.touchstartHandler), this.selector.addEventListener("touchend", this.touchendHandler), this.selector.addEventListener("touchmove", this.touchmoveHandler, {
					passive: !0
				}), this.selector.addEventListener("mousedown", this.mousedownHandler), this.selector.addEventListener("mouseup", this.mouseupHandler), this.selector.addEventListener("mouseleave", this.mouseleaveHandler), this.selector.addEventListener("mousemove", this.mousemoveHandler))
			}
			return n(e, [{
				key: "mergeSettings",
				value: function(e) {
					var t = {
						selector: "",
						duration: 200,
						easing: "ease-out",
						perPage: 1,
						startIndex: 0,
						draggable: !0,
						threshold: 20,
						loop: !1
					},
						i = e;
					for (var r in i) t[r] = i[r];
					return t
				}
			}, {
				key: "webkitOrNot",
				value: function() {
					var e = document.documentElement.style;
					return "string" == typeof e.transform ? "transform" : "WebkitTransform"
				}
			}, {
				key: "init",
				value: function() {
					if (null === this.selector) throw new Error("你的选择器有问题？");
					this.resolveSlidesNumber(), this.selector.style.overflow = "hidden", this.sliderFrame = document.createElement("div"), this.sliderFrame.style.width = this.selectorWidth / this.perPage * this.innerElements.length + "px", this.sliderFrame.style.webkitTransition = "all " + this.config.duration + "ms " + this.config.easing, this.sliderFrame.style.transition = "all " + this.config.duration + "ms " + this.config.easing, this.config.draggable && (this.sliderFrame.style.cursor = "-webkit-grab");
					for (var e = document.createDocumentFragment(), t = 0; t < this.innerElements.length; t++) {
						var i = document.createElement("div");
						i.style.cssFloat = "left", i.style.float = "left", i.style.width = 100 / this.innerElements.length + "%", i.appendChild(this.innerElements[t]), e.appendChild(i)
					}
					this.sliderFrame.appendChild(e), this.selector.appendChild(this.sliderFrame), this.slideToCurrent()
				}
			}, {
				key: "resolveSlidesNumber",
				value: function() {
					if ("number" == typeof this.config.perPage) this.perPage = this.config.perPage;
					else if ("object" === s(this.config.perPage)) {
						this.perPage = 1;
						for (var e in this.config.perPage) window.innerWidth > e && (this.perPage = this.config.perPage[e])
					}
				}
			}, {
				key: "prev",
				value: function() {
					var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : 1;
					0 === this.currentSlide && this.config.loop ? this.currentSlide = this.innerElements.length - this.perPage : this.currentSlide = Math.max(this.currentSlide - e, 0), this.slideToCurrent()
				}
			}, {
				key: "next",
				value: function() {
					var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : 1;
					this.currentSlide === this.innerElements.length - this.perPage && this.config.loop ? this.currentSlide = 0 : this.currentSlide = Math.min(this.currentSlide + e, this.innerElements.length - this.perPage), this.slideToCurrent()
				}
			}, {
				key: "goTo",
				value: function(e) {
					this.currentSlide = Math.min(Math.max(e, 0), this.innerElements.length - 1), this.slideToCurrent()
				}
			}, {
				key: "slideToCurrent",
				value: function() {
					this.sliderFrame.style[this.transformProperty] = "translate3d(-" + this.currentSlide * (this.selectorWidth / this.perPage) + "px, 0, 0)"
				}
			}, {
				key: "updateAfterDrag",
				value: function() {
					var e = this.drag.end - this.drag.start,
						t = Math.abs(e),
						i = Math.ceil(t / (this.selectorWidth / this.perPage));
					e > 0 && t > this.config.threshold ? this.prev(i) : e < 0 && t > this.config.threshold && this.next(i), this.slideToCurrent()
				}
			}, {
				key: "resizeHandler",
				value: function() {
					this.resolveSlidesNumber(), this.selectorWidth = this.selector.getBoundingClientRect().width, this.sliderFrame.style.width = this.selectorWidth / this.perPage * this.innerElements.length + "px", this.slideToCurrent()
				}
			}, {
				key: "clearDrag",
				value: function() {
					this.drag = {
						start: 0,
						end: 0
					}
				}
			}, {
				key: "touchstartHandler",
				value: function(e) {
					e.stopPropagation(), this.pointerDown = !0, this.drag.start = e.touches[0].pageX
				}
			}, {
				key: "touchendHandler",
				value: function(e) {
					e.stopPropagation(), this.pointerDown = !1, this.sliderFrame.style.webkitTransition = "all " + this.config.duration + "ms " + this.config.easing, this.sliderFrame.style.transition = "all " + this.config.duration + "ms " + this.config.easing, this.drag.end && this.updateAfterDrag(), this.clearDrag()
				}
			}, {
				key: "touchmoveHandler",
				value: function(e) {
					e.stopPropagation(), this.pointerDown && (this.drag.end = e.touches[0].pageX, this.sliderFrame.style.webkitTransition = "all 0ms " + this.config.easing, this.sliderFrame.style.transition = "all 0ms " + this.config.easing, this.sliderFrame.style[this.transformProperty] = "translate3d(" + (this.currentSlide * (this.selectorWidth / this.perPage) + (this.drag.start - this.drag.end)) * -1 + "px, 0, 0)")
				}
			}, {
				key: "mousedownHandler",
				value: function(e) {
					e.preventDefault(), e.stopPropagation(), this.pointerDown = !0, this.drag.start = e.pageX
				}
			}, {
				key: "mouseupHandler",
				value: function(e) {
					e.stopPropagation(), this.pointerDown = !1, this.sliderFrame.style.cursor = "-webkit-grab", this.sliderFrame.style.webkitTransition = "all " + this.config.duration + "ms " + this.config.easing, this.sliderFrame.style.transition = "all " + this.config.duration + "ms " + this.config.easing, this.drag.end && this.updateAfterDrag(), this.clearDrag()
				}
			}, {
				key: "mousemoveHandler",
				value: function(e) {
					e.preventDefault(), this.pointerDown && (this.drag.end = e.pageX, this.sliderFrame.style.cursor = "-webkit-grabbing", this.sliderFrame.style.webkitTransition = "all 0ms " + this.config.easing, this.sliderFrame.style.transition = "all 0ms " + this.config.easing, this.sliderFrame.style[this.transformProperty] = "translate3d(" + (this.currentSlide * (this.selectorWidth / this.perPage) + (this.drag.start - this.drag.end)) * -1 + "px, 0, 0)")
				}
			}, {
				key: "mouseleaveHandler",
				value: function(e) {
					this.pointerDown && (this.pointerDown = !1, this.sliderFrame.style.cursor = "-webkit-grab", this.drag.end = e.pageX, this.sliderFrame.style.webkitTransition = "all " + this.config.duration + "ms " + this.config.easing, this.sliderFrame.style.transition = "all " + this.config.duration + "ms " + this.config.easing, this.updateAfterDrag(), this.clearDrag())
				}
			}, {
				key: "destroy",
				value: function() {
					window.removeEventListener("resize", this.resizeHandler), this.selector.removeEventListener("touchstart", this.touchstartHandler), this.selector.removeEventListener("touchend", this.touchendHandler), this.selector.removeEventListener("touchmove", this.touchmoveHandler), this.selector.removeEventListener("mousedown", this.mousedownHandler), this.selector.removeEventListener("mouseup", this.mouseupHandler), this.selector.removeEventListener("mouseleave", this.mouseleaveHandler), this.selector.removeEventListener("mousemove", this.mousemoveHandler)
				}
			}]), e
		}();
		t.default = o, e.exports = t.default
	}])
});

展示效果

Enjoy it ? Donate me ! 欣赏此文？求鼓励，求支持！