我正在使用Jssor库制作一个图像滑块，该滑块应允许对图像进行排序（向右滑动表示是，向左滑动表示否）。
我想要：
- 对于向左或向右滑动后消失的每个图像
- 以跟踪哪些图像在哪个方向上滑动
- 将生成的数组馈送到表中，以便在所有图像都已刷过之后显示
我看到jssor.slider.js文件中有"isToRight"one_answers"isToLeft"函数，但当我试图在JavaScript中使用它们时，我的页面似乎无法访问它们。此外，我不能把我的代码放在JavaScript的正确部分，因为整个滑块都停止工作了。我不确定将带有图像的div添加到表中是否会很好，但我不确定还能怎么做。我需要做什么才能做到这一点？这就是我目前所在的位置：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Simple Slider Example - Jssor Slider, Slideshow</title>
</head>
<body style="font-family:Arial, Verdana;background-color:#fff;">
<!-- it works the same with all jquery version from 1.3.1 to 2.0.3 -->
<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
<!-- use jssor.slider.mini.js (39KB) or jssor.sliderc.mini.js (31KB, with caption, no slideshow) or jssor.sliders.mini.js (26KB, no caption, no slideshow) instead for release -->
<!-- jssor.slider.mini.js = jssor.sliderc.mini.js = jssor.sliders.mini.js = (jssor.core.js + jssor.utils.js + jssor.slider.js) -->
<script type="text/javascript" src="../js/jssor.core.js"></script>
<script type="text/javascript" src="../js/jssor.utils.js"></script>
<script type="text/javascript" src="../js/jssor.slider.mini.js"></script>
<script type="text/javascript" src="../js/jssor.slider.js"></script>
<script>
jQuery(document).ready(function ($) {
var options = {
$FillMode: 4,
};
var jssor_slider1 = new $JssorSlider$('slider1_container', options);
//responsive code begin
//you can remove responsive code if you don't want the slider scales
//while window resizes
function ScaleSlider() {
var parentWidth = $('#slider1_container').parent().width();
if (parentWidth) {
jssor_slider1.$ScaleWidth(parentWidth);
}
else
window.setTimeout(ScaleSlider, 30);
}
//Scale slider after document ready
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
var no_array = [];
var yes_array = [];
function sortImages() {
if SWIPE? (isToRight()) {
$this.push(yes_array);
$this.hide();
}
else SWIPE? (isToLeft()) {
$this.push(no_array);
$this.hide();
}
return no_array;
return yes_array;
}
sortImages();
var myArray = [[no_array], [yes_array]];
function makeTableHTML(myArray) {
var result = "<table>";
for(var i=0; i<myArray.length; i++) {
result += "<tr>";
for(var j=0; j<myArray[i].length; j++){
result += "<td>"+myArray[i][j]+"</td>";
}
result += "</tr>";
}
result += "</table>";
$('#sortedTable').html(result);
}
makeTableHTML(myArray);
});
</script>
<div id="main">
<h1>Swipe right for yes and left for no.</h1>
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 300px; height: 200px; overflow: hidden;">
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 300px; height: 180px;">
<div><img src="{{ STATIC_URL }}images/indian.jpg" alt="" title=""/></div>
<div><img src="{{ STATIC_URL }}images/hamburger.jpg" alt="" title=""/></div>
<div><img src="{{ STATIC_URL }}images/italian-pizza.jpg" alt="" title=""/></div>
<div><img src="{{ STATIC_URL }}images/hummus.jpg" alt="" title=""/></div>
<div><img src="{{ STATIC_URL }}images/pie.jpg" alt="" title=""/></div>
<div><img src="{{ STATIC_URL }}images/montecristo.jpg" alt="" title=""/></div>
<div><img src="{{ STATIC_URL }}images/eclairs.jpg" alt="" title=""/></div>
</div>
<script>jssor_slider1_starter('slider1_container');</script>
</div>
<div id="sortedTable">
</div>
</div>
</body>
</html>
请使用api跟踪事件，
<script>
jssor_slider1.$On($JssorSlider$.$EVT_SWIPE_START, function(position, virtualPosition){});
jssor_slider1.$On($JssorSlider$.$EVT_SWIPE_END, function(position, virtualPosition){});
</script>
通过比较可变位置，你就会知道发生了什么。
请参阅jssor滑块api。
此外，$EVT_PARK也是可谐振的，
<script>
jssor_slider1.$On($JssorSlider$.$EVT_PARK, function(slideIndex, fromIndex){
//fires when slide change from 'fromIndex' to 'slideIndex'
});
</script>
<script>
jQuery(document).ready(function ($) {
var options = {
$FillMode: 4,
};
var jssor_slider1 = new $JssorSlider$('slider1_container', options);
//swipe handling begin
var swipeStartPosition
function OnSwipeStart(position, virtualPosition)
{
lastSwipePosition = virtualPosition;
}
function OnSwipeEnd(position, virtualPosition)
{
if(virtualPosition > swipeStartPosition)
{
//swipe to left end, do something here
//var currentSlideIndex = jssor_slider1.$CurrentIndex();
}
else
{
//swipe to right end, do something here
//var currentSlideIndex = jssor_slider1.$CurrentIndex();
}
}
jssor_slider1.$On($JssorSlider$.$EVT_SWIPE_START, OnSwipeStart);
jssor_slider1.$On($JssorSlider$.$EVT_SWIPE_END, OnSwipeEnd);
//swipe handling end
//responsive code begin
//you can remove responsive code if you don't want the slider scales
//while window resizes
function ScaleSlider() {
var parentWidth = $('#slider1_container').parent().width();
if (parentWidth) {
jssor_slider1.$ScaleWidth(parentWidth);
}
else
window.setTimeout(ScaleSlider, 30);
}
//Scale slider after document ready
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
}
</script>