Question

我试图制作旋转木马并在自定义事件的幻灯片移动中捕捉一些特定用户的操作。

幻灯片恢复
在触摸移动期间

我尝试使用slick，但光滑的自定义事件不会像我预期的那样触发。这是我试过的代码。

＆＃13;

beforeChange -> afterChange -> setPosition

＆＃13;

没有恢复活动

当幻灯片未达到touchThreshold条件时，幻灯片将返回到最后一个位置，但事件将按以下顺序触发。

beforeChange -> swipe -> afterChange -> setPosition

而对于正常的幻灯片移动，事件的触发方式如下：

arrayAdapter=new ArrayAdapter<String>(this,R.layout.spinner_item,R.id.item1,l);

唯一的区别是＆＃39;刷卡＆＃39;区别于正常移动和恢复移动，我需要从这种差异中找出这是一项乏味的工作。

没有办法抓住用户的触摸动作

当用户在触摸期间移动幻灯片时，there's no custom events firing 在那时候。事件触发后，事件就会立即触发。

我的问题是基于jQuery的carousel插件推荐哪些符合上述条件？

Answer 1

其中一个替代方案是egjs基于jQuery轻弹组件。您可以在http://naver.github.io/egjs/demo/flicking/

查看基本演示

以下是示例工作演示代码：

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi">
	<style type="text/css">
		.slider{height:130px;background-color:grey}
		.eg-flick-panel {font-size:2em;text-align:center}
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/egjs/1.1.0/pkgd/flicking.pkgd.min.js"></script>
</head>
<body>

<section class="slider">
	<div id="item1" style="background-color:#CC66CC">
		<p>slide1</p>
	</div>
	<div id="item2" style="background-color:#66cccc">
		<p>slide2</p>
	</div>
	<div id="item3" style="background-color:#ffc000">
		<p>slide3</p>
	</div>
	<div id="item3" style="background-color:#f5871f">
		<p>slide4</p>
	</div>
	<div id="item3" style="background-color:#66ff66">
		<p>slide5</p>
	</div>
	<div id="item3" style="background-color:#8a6d3b">
		<p>slide6</p>
	</div>
</section>

<div id="log" style="height:300px;overflow-y:auto"></div>

<script>
	new eg.Flicking(".slider", {
		duration: 300,
		circular: true
	}).on({
		beforeFlickStart: handler,
		flick: handler,
		flickEnd: handler,
		beforeRestore: handler,
		restore: handler
	});

	function handler(event) {
		var $log = $("#log"), direction = { "2": "&larr;", "4": "&rarr;" };

		/^before/.test(event.eventType) && $log.html("");
		$log.html(event.eventType +": "+ direction[event.direction] +"<br>"+ $log.html());
	}
</script>
</body>
</html>

恢复活动

当你注意到运行上面的代码时，当没有移动幻灯片时，通过阈值恢复事件按此顺序触发：

beforeRestore -> flick ... flick -> restore

触摸移动

在触摸面板移动期间，多个flick事件会触发与您的移动一样多的事件，并且您还可以使用事件参数值确定移动的方向。

事件按此顺序触发：

(during the touch down moves) flick ... flick -> (when touch is up) beforeFlickStart -> flick ... flick -> flickEnd

希望这能回答你的问题。

在旋转木马上捕捉特定事件

1 个答案: