2

Jssor ライブラリを使用して、画像を並べ替えることができる画像スライダーを作成しています (はいの場合は右にスワイプし、いいえの場合は左にスワイプします)。

をお願いします：

  1. 左または右にスワイプした後に各画像が消えるようにする
  2. どの画像がどの方向にスワイプされたかを追跡する
  3. 結果の配列をテーブルにフィードして、すべての画像がスワイプされた後に表示されます

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

3 に答える 3

1

また、$EVT_PARK も共鳴し、

<script>
    jssor_slider1.$On($JssorSlider$.$EVT_PARK, function(slideIndex, fromIndex){
        //fires when slide change from 'fromIndex' to 'slideIndex'
    });
</script>
于 2014-04-21T07:51:24.013 に答える