0

这是我第一次尝试开发带有触摸事件的东西。我有一个在悬停时动画的滑块，前两张幻灯片的链接可以在点击时显示隐藏的内容。试图找出一种方法来调整它，以便内容在滑动而不是悬停时动画，并且仍然保持幻灯片中链接的“点击”。我使用的站点有 jQuery 1.3.2，没有升级的希望，所以希望找到可以与那个旧库一起使用的东西。

您可以在此处查看正在进行的滑块。我也把它变成了小提琴：http: //jsfiddle.net/uqY8E/

最终，我想要实现的是当用户滑动手指时移动幻灯片（如果 iPad 上的背景是静态的就可以），如果他们抬起手指，动画就会停止，就像它开始和停止一样徘徊。我阅读了这篇文章并创建了一个 if/else 语句，因此它仍然可以在悬停时工作。动画在 iPad 上不起作用，但箭头不显示，所以我认为 if 语句是正确的。

jQuery :

            $(document).ready(function() {
        var timer;

        if(!!('ontouchstart' in window)){
            $("#nextarrow, #backarrow").hide();
            $(".mid").bind('touchstart', function(){
                timer = setInterval(function() {swipeLeft();}, 50);
            }, function() {
                clearInterval(timer);
            });

            function swipeLeft() {
                                if(($(".mid").position().left) >= -1880){
                                $("#background").stop().animate({
                                    'left': '-=2px'
                                }, 50);
                                $(".mid").stop().animate({
                                    'left': '-=20px'
                                }, 50);
                                }
                            }
        }

        else{
        $("#nextarrow").hover(function() {
                timer = setInterval(function() {slideLeft();}, 50);
            }, function() {
                clearInterval(timer);
            });


        $("#backarrow").hover(function() {
                timer = setInterval(function() {slideRight();}, 50);
            }, function() {
                clearInterval(timer);
            });



        function slideLeft() {
            if(($(".mid").position().left) >= -1880){
            $("#background").stop().animate({
                'left': '-=2px'
            }, 50);
            $(".mid").stop().animate({
                'left': '-=20px'
            }, 50);
            }
        }

        function slideRight() {
            if(($(".mid").position().left) <= -10){
            $("#background").stop().animate({
                'left': '+=2px'
            }, 50);
            $(".mid").stop().animate({
                'left': '+=20px'
            }, 50);
            }
        }

        }


        $("#shop-slide1").click(function() {
        $("#shop-slide1-contents").animate({'bottom': '-0px'}, 1000);
        $(".close").click(function() {
        $("#shop-slide1-contents").animate({'bottom': '-525px'}, 1000);
        });
        });

        $("#shop-slide2").click(function() {
        $("#shop-slide2-contents").fadeIn('slow');
        $(".close").click(function() {
        $("#shop-slide2-contents").fadeOut('fast');
        });
        });

        });

HTML：

            <div id="mask">
            <div id="nextarrow"></div>
            <div id="backarrow"></div>
            <div id="background"></div>
            <div class="mid">                   
                                 <div id="slide1" class="slide">
                                    <p id="shop-slide1" class="shop-link">+ Shop The Collection</p>
                                 </div>
                                 <div id="slide2" class="slide">
                                    <p id="shop-slide2" class="shop-link" style="color: #fff; font-weight: bold;">+ I need this</p>
                                 </div>
                                 <div id="slide3" class="slide"></div>
                                 <div id="slide4" class="slide"></div>
                                 <div id="slide5" class="slide"></div>


            </div>
            </div>

我需要专门为 iPad 更改 swipeLeft 功能吗？我从悬停事件中复制了它。非常感谢任何有助于使其工作的帮助 - 或为 iPad 调整它的替代方法的建议 - 非常感谢。我是这方面的新手，要学的东西很多！

4

0 回答 0