在幻灯片中添加滑动功能

时间:2016-02-11 10:41:53

标签: jquery html css slider swipe

我的代码现在没有刷卡功能或者在我看手机时无法滑动滑块。 我想在我的滑块中添加滑动功能,尤其是当我在手机中查看时。 这是我的HTML代码:

<div id="img-grp-wrap" class="slide-dekstop">
    <div class="img-wrap">
        <img src="img/slider.jpg" />
        <img src="img/slider3.jpg" />
        <img src="img/slider2.jpg" />
    </div>   
</div>

这里是我的css代码:

#img-grp-wrap {
position: relative;
width: 100%;
}
.img-wrap {
position: relative;
width: 100%;
height: 1000px;
overflow: hidden;
}

我的js代码:

<script type="text/javascript">
    $(document).ready(function() { 
    var imgFirst = $('#img-grp-wrap .img-wrap img');
    $('#img-grp-wrap .img-wrap img:gt(0)').hide();

    var rotate = setInterval(function() {
        slideShow();
    }, 4000);

    $('#img-grp-wrap .prev, #img-grp-wrap .next').hover(function() {
        clearInterval(rotate);
    }, function() {
        rotate = setInterval(function() {
            slideShow();
        }, 4000);
    });

    $('#img-grp-wrap .next').click(function() {
        imgFirst.filter(":first-child") 
        .stop().fadeOut().next().fadeIn().end().appendTo('.img-wrap');
    });

    $('#img-grp-wrap .prev').click(function() {
        imgFirst.filter(":first-child").stop().fadeOut();
        $('#img-grp-wrap .img-wrap img:last-child').prependTo('.img-wrap').fadeOut();
        imgFirst.filter(":first-child").fadeIn();
    });

    });
</script>

请帮我在我的代码中添加滑动功能。 THX

1 个答案:

答案 0 :(得分:1)

您可以添加jQueryMobile

它有滑动方法。这是一个例子:

class parent{
    public:
    int number;
    string getUnit();
    myClass myMember;
}

class myClass{
    public:
    int counter;
    string getParentUnit();
}