使用 Jssor 滑块对图像进行排序并显示结果

Question

I'm using the Jssor library to make an image slider that should allow the images to be sorted (by swiping to the right for yes and to the left for no).我正在使用Jssor 库制作一个图像滑块，它应该允许对图像进行排序（向右滑动表示是，向左滑动表示否）。

I would like:我想：

for each image to disappear after a swipe to the left or right每个图像在向左或向右滑动后消失
to keep track of which images were swiped in which direction跟踪哪些图像是在哪个方向上滑动的
to feed the resulting array into a table to appear after all the images have been swiped将生成的数组输入到表格中，以在所有图像都被刷过之后出现

I've seen that there are "isToRight" and "isToLeft" functions in the jssor.slider.js file, but when I tried to use them inside of my JavaScript, my page didn't seem able to access them.我已经看到 jssor.slider.js 文件中有“isToRight”和“isToLeft”函数，但是当我尝试在我的 JavaScript 中使用它们时，我的页面似乎无法访问它们。 Also, I must not be putting my code in the right part of the JavaScript, because the entire slider stops working.此外，我不能将我的代码放在 JavaScript 的正确部分，因为整个滑块停止工作。 I'm not sure if adding divs with images to a table will work well, but I'm not sure how else to go about it.我不确定将带有图像的 div 添加到表格中是否会很好地工作，但我不确定如何去做。 What do I need to do to get this working?我需要做什么才能让它发挥作用？ This is where I am currently:这是我目前所在的位置：

<!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>

Answer 1

Please use api to track events,请使用api来跟踪事件，

<script>
    jssor_slider1.$On($JssorSlider$.$EVT_SWIPE_START, function(position, virtualPosition){});
    jssor_slider1.$On($JssorSlider$.$EVT_SWIPE_END, function(position, virtualPosition){});
</script>

by comparing variable position, you will know what happened.通过比较变量位置，你就会知道发生了什么。

see jssor slider api .请参阅jssor 滑块 api 。

Answer 2

Also, $EVT_PARK is also resonable,另外，$EVT_PARK 也是合理的，

<script>
    jssor_slider1.$On($JssorSlider$.$EVT_PARK, function(slideIndex, fromIndex){
        //fires when slide change from 'fromIndex' to 'slideIndex'
    });
</script>

Answer 3

<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>

使用 Jssor 滑块对图像进行排序并显示结果

问题描述

3 个解决方案

解决方案1
1 2014-04-21 07:03:44

解决方案2
1 2014-04-21 07:51:24

解决方案3
0 2014-04-21 10:03:05

使用 Jssor 滑块对图像进行排序并显示结果

问题描述

3 个解决方案

解决方案1 1 2014-04-21 07:03:44

解决方案2 1 2014-04-21 07:51:24

解决方案3 0 2014-04-21 10:03:05

解决方案1
1 2014-04-21 07:03:44

解决方案2
1 2014-04-21 07:51:24

解决方案3
0 2014-04-21 10:03:05