Question

我试图让一些照片逐个显示，然后通过滑动进行排序。

一次只能显示一张照片，然后在向左或向右滑动后显示下一张照片。我可以使用TouchSwipe（http://jsfiddle.net/MichelleGlauser/CR329/1）进行滑动，但是一旦我将滑动放入循环中以获取所有图片，滑动和循环都不起作用（http://jsfiddle.net/MichelleGlauser/CR329/4/）。也许我需要以一种我尚未想到的不同方式来解决这个问题。我尝试了几种不同的版本，这就是我现在所做的：

    $(document).ready(function sort_options() {
        var cafe = 'url("http://i1360.photobucket.com/albums/r653/brylans2013/Brylans%20Cafe%20Advertisment/9f34ef72-615e-45e9-a182-ec0c670f63a6_zps7d960dc7.jpg") no-repeat;  background-position: center; background-size: cover;;';
        var buffet = 'url("http://i1037.photobucket.com/albums/a452/drmadvertising/Peninsula%20Papers/Peninsula%20Puzzles/HibachiGrillPuzz.jpg") no-repeat;  background-position: center; background-size: cover;;';
        var fastfood = 'url("http://i242.photobucket.com/albums/ff231/bour3/things%20I%20made%20then%20ate/hamburger.jpg") no-repeat;  background-position: center; background-size: cover;;';

        var options = [cafe, buffet, fastfood];
            for (var i = 0; i < options.length; i++)
                $("#test").attr("background", i);
                    $(function() {          
                        //Keep track of how many swipes
                        var count=0;

                        //Enable swiping...
                        $("#test").swipe( {
                            //Generic swipe handler for all directions
                            swipe:function(event, direction, distance, duration, fingerCount) {
                                if(direction=='left') {
                                    $('#choice').text("Not this one." );    
                                }
                                else if(direction=='right') {
                                    $('#choice').text('Glad you like it.');
                                }
                            },
                            //Default is 75px, set to 0 for demo so any distance triggers swipe
                            threshold:0
                        });
                    });
   });)

如何让此代码正常工作？

Answer 1

我找到了一个不同的解决方案，它不涉及循环（不确定它们在哪里），但它只是在滚动时使用一个函数将图像移动到数组中的下一个。基本上将以下代码添加到第一个示例中。

//Stripped CSS Styling leaving only URL
var cafe = 'http://i1360.photobuck...uzz.jpg';
var buffet = 'http://i1477.photobuck...erg.jpg';
var fastfood = 'http://i185.photobuck...grz.jpg';

var options = [cafe, buffet, fastfood];
var selectedoption = 0;

//Programatically set the first image
$('#test').css('background-image', "url('" + options[selectedoption] + "')");

一旦用户滑动，我会增加所选选项（如果它在最后一个选项上返回开始）

        if (selectedoption == options.length) {
            selectedoption = 0;
        } else {
            selectedoption++;
        }

然后在你的if（方向==＆＃34;左＆＃34;）代码块之后我添加了更改图像的代码

$('#test').css('background-image', "url('" + options[selectedoption] + "')");

这是一个有效的JSFiddle

我还建议您预先加载图片，因为我相信您会意识到他们需要时间来加载。

通过滑动排序图像（使用TouchSwipe）

1 个答案: