Question

我正在使用the Jssor library创建一个图像滑块，该滑块应该允许对图像进行排序（通过向右滑动以显示“是”，向左滑动为“否”）。

我想：

每张图片在向左或向右滑动后消失
跟踪哪个图像在哪个方向滑动
将生成的数组输入到表中，以便在刷完所有图像后显示

我已经看到jssor.slider.js文件中有“isToRight”和“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>

Answer 1

请使用api跟踪事件，

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

通过比较变量位置，您将知道发生了什么。

请参阅jssor slider api。

Answer 2

此外，$ 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 个答案: