个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我正在尝试制作轮播并捕获自定义事件中幻灯片移动的某些特定用户操作。
我尝试使用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": "←", "4": "→" };
/^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
我在我的应用程序中使用开源 iCarousel 来实现轮播控件。我使用的轮播类型是 iCarouselTypeRotary 并且图像在这种类型中线性排列。但是，我需要图像像所附图像中的旋转木马一样带来
有人看过像这样的 jQuery 3D 轮播教程吗？ http://web.enavu.com/demos/3dcarouselwip/ 没有给出来源，但想知道是否有人有关于如何连续圈出 DIV 并调整
我正在开发一种使用相机自动拍摄照片的软件。我希望用户能够设置照片间隔。我希望它看起来和工作起来像某种轮播。 它应该是这样的: 当我滑动(或用鼠标拖动)时，它应该沿给定方向移动: 所选项目应始终位于中间
抱歉问了个愚蠢的问题。我正在寻找带有按钮的旋转木马。我在 Bootply 上找到了这个模板，它完全符合我的要求。我在开发方面还很陌生。 也许有人可以向我解释如何摆脱侧面滚动效果。我知道我必须向 Jav
我正在寻找一个可以处理表单元素的 jQuery 轮播风格插件。 这是我需要做的。 我有三个表单元素:两个常规文本框和一个文本区域。还有两个按钮，上一个和下一个。 单击下一步按钮时，文本框/文本区域会切
我想构建一个包含两个图像轮播的网页，并且我希望能够将图像从一个轮播拖动到另一个。 我已经有了与 jCarouselLite 一起使用的图像轮播:它使用两个 UL 元素来指定轮播的图像。这工作得很好。
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开，visit the help center . 关闭 1
我有这段代码可以从数据库中获取轮播图片或视频 $stmt = $con->prepare("SELECT * FROM `Main`"); $stmt->execut
我需要做这个 slider ，我找到了一些代码并尝试了，但没有一个完全是 LIKE THIS .bloco03 img {
我的任务是制作 3 张图片的轮播/幻灯片，只能在移动设备上使用。在桌面上，这些图像将显示在 3 列中。有没有一种方法可以自动转换，而无需我创建两个不同的模块并根据屏幕尺寸隐藏/显示一个？ 最佳答案 你
我需要在卡片轮播上创建这种效果。我使用 Owl Carousel ，我给了元素框阴影。但我坚持制作不同位置元素的效果，例如 3d 或任何名称。 这是我想做的 http://www.awesomescr
我已经盯着这段相同的代码看了大约 4 个小时，并尝试观看一些不同的教程。问题是 slider 加载，有 3 张幻灯片的空间，但它只显示第一张幻灯片。 所有图像加载良好(在浏览器中验证)，但轮播不会更改
我的 carouse/slider 有问题，我已经做到了，上一张和下一张图片每边各占 25%，中央图片占 50% 宽度。问题是我能够更改左右图像的背景，但我似乎无法将相同的颜色应用于中间图像。我已经尝
我想一次放 5 张图片作为页面的背景，即一张图片会显示一小段时间(比如每张一秒钟)，然后重复它们。 我想知道有没有办法用 CSS 或 JS 来做到这一点？ 预先感谢您的帮助! 最佳答案 这也许就是您正
我正在寻找一个支持触摸、可拖动、响应式 jQuery 滚动条/幻灯片/轮播/ slider ，用于显示水平可滚动项目列表(例如， eshop、最近将照片添加到数据库等)。 它看起来类似于苹果应用程序商
我想要夹层画廊的 Bootstrap 轮播。基本上;我正在拉入所有图像，并且我想要单行三张图像轮播。这是我非常讨厌的一段工作代码；我真的很想让它适用于无限数量的图像。 {% if page.d
大家好，我有这段代码，我一直在为我的网站编写代码。我正在尝试实现一个轮播功能，其中一张图片在另一张图片之后滑动。我遇到的问题是图片不会滑动。这是我的代码在欢迎 Controller 的索引页面中的样子
我正在构建一个简单的轮播，一旦用户水平滚动，事件点就会改变事件状态。但是，当我滚动时，jQuery 左侧位置返回值没有改变: li_left = li.position().left; // this
我正在尝试将文本放在轮播 slider 中的图像下方，但现在文本出现在图像上，而不是下方。 它看起来像这样: 但我希望它看起来像这样: 这是我的代码: final CarouselSlider aut
我在使用 boostrap carousel 时遇到 CSS 问题 我只是想让它更高，我已经尝试了几个 css 但没有任何效果。代码是在这个 jsFiddle 中，http://jsfiddle.ne
我是一名优秀的程序员,十分优秀！