个人中心
gpt4 book ai didi

jquery - 在轮播上捕获特定事件

转载 作者：行者123 更新时间：2023-12-01 01:42:31 26 4
gpt4 key购买 nike

我正在尝试制作轮播并捕获自定义事件中幻灯片移动的某些特定用户操作。

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

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

<!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">
	<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css"/>
	<link rel="stylesheet" type="text/css" href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css"/>
	<style type="text/css">
		.slider {
			width: auto;
			margin: 30px 50px 50px; }
	
		.slick-slide {
			background: #3a8999;
			color: white;
			padding: 40px 0;
			font-size: 30px;
			font-family: "Arial", "Helvetica";
			text-align: center; }
	
		.slick-prev:before, .slick-next:before {
			color: black; }
	
		.slick-dots {
			bottom: -30px; }
	
		.slick-slide:nth-child(odd) {
			background: #e84a69; }
	
	</style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script>
</head>
<body>

<section class="slider">
	<div>slide1</div>
	<div>slide2</div>
	<div>slide3</div>
	<div>slide4</div>
	<div>slide5</div>
	<div>slide6</div>
</section>

<div id="log" style="height:300px;overflow-y:auto"></div>

<script>
	$(".slider").slick({
		autoplay: false,
		dots: true
	}).on("afterChange beforeChange edge init reInit setPosition swipe breakpoint", handler);

	function handler(event, slick, direction) {
		var $log = $("#log");
		event.type == "beforeChange" && $log.html("");

		$log.html(event.type +"<br>"+ $log.html());
	}
</script>
</body>
</html>

没有恢复事件

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

beforeChange -> afterChange -> setPosition

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

beforeChange -> swipe -> afterChange -> setPosition

唯一的区别是“滑动”。为了区分正常移动和恢复移动，我需要从这个差异中找出这是一项乏味的工作。

无法捕捉用户的触摸 Action

当用户在触摸过程中移动幻灯片时，there's no custom events firing 在那时候。当触摸启动后，事件立即触发。

我的问题是推荐哪些基于 jQuery 的轮播插件满足上述条件？

最佳答案

替代方案之一是 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

希望这能解答您的问题。

关于jquery - 在轮播上捕获特定事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35765718/

26 4 0
文章推荐： jquery - jQgrid filterToolbar 因 searchOnEnter 而失败
文章推荐： jquery - 如何以编程方式触发cordova的后退按钮事件
文章推荐： javascript - JS/Jquery 在空中调度时间线上，就像 BBC 在空中调度一样
文章推荐： prolog - 如何判断 clpfd 程序的计算复杂度是多少？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com