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

Use Jssor slider to sort images and display results

本文关键字：排序 显示 结果 图像 Jssor 使用      更新时间：2023-09-26

我正在使用Jssor库制作一个图像滑块，该滑块应允许对图像进行排序（向右滑动表示是，向左滑动表示否）。

我想要：

  1. 对于向左或向右滑动后消失的每个图像
  2. 以跟踪哪些图像在哪个方向上滑动
  3. 将生成的数组馈送到表中，以便在所有图像都已刷过之后显示

我看到jssor.slider.js文件中有"isToRight"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>
相关文章：