Question

我有一个相当简单的脚本，用于移动贷款申请网站上的一组滑动面板。这些面板根据用户信息（如年龄，联合或个人应用程序）和（汽车贷款）GAP保险选择显示不同的保险套餐。

滑动对我们来说很好，但是我们想要添加箭头按钮，这些按钮也为用户执行滑动功能。这些按钮用于提醒用户左侧或右侧方向有更多选项，单击这些按钮将在该方向上执行滑动，就像用户的手指动作一样。这是我不知道如何添加，并希望有关如何使用我们当前的脚本/ CSS创建它们的一些指导，如果有人有建议。我不想尝试导航到新页面或其他任何内容，我只是希望滑动功能也可以通过按钮触发。

当前行为允许用户在所有包中滑动到右侧（1到4，具体取决于上述条件）。如果有他们已经滑过的包裹，他们可以向左滑动。

滑动的javascript：

$(function () {
var sliding = startClientX = startPixelOffset = pixelOffset = currentSlide = 0,
    slideCount = $('.slide').length;

$('html').live('mousedown touchstart', slideStart);
$('html').live('mouseup touchend', slideEnd);
$('html').live('mousemove touchmove', slide);  

function slideStart(event) {
    if (event.originalEvent.touches)
        event = event.originalEvent.touches[0];
    if (sliding == 0) {
        sliding = 1;
        startClientX = event.clientX;
    }
}

function slide(event) {
    event.preventDefault();
    if (event.originalEvent.touches)
        event = event.originalEvent.touches[0];
    var deltaSlide = event.clientX - startClientX;

    if (sliding == 1 && deltaSlide != 0) {
        sliding = 2;
        startPixelOffset = pixelOffset;
    }

    if (sliding == 2) {
        var touchPixelRatio = 1;
        if ((currentSlide == 0 && event.clientX > startClientX) || (currentSlide == slideCount - 1 && event.clientX < startClientX))
            touchPixelRatio = 2;
        pixelOffset = startPixelOffset + deltaSlide / touchPixelRatio;
        $('#slides').css('-webkit-transform', 'translate3d(' + pixelOffset + 'px,0,0)').removeClass();
    }
}

function slideEnd(event) {
    if (sliding == 2) {
        sliding = 0;
        currentSlide = pixelOffset < startPixelOffset ? currentSlide + 1 : currentSlide - 1;
        currentSlide = Math.min(Math.max(currentSlide, 0), slideCount - 1);
        pixelOffset = currentSlide * -$('body').width();
        $('#temp').remove();
        $('<style id="temp">#slides.animate{-webkit-transform:translate3d(' + pixelOffset + 'px,0,0)}</style>').appendTo('head');
        $('#slides').addClass('animate').css('-webkit-transform', '');
    }
}
});

CSS：

html, body {
  height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  background: #333;
}

#slides {
  width: 100%; height: 100%;
  white-space: nowrap;
  font-size: 0;
  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

.slide {
   width: 100%; height:auto;
   display: inline-block;
   background-size: cover;  
}

.animate {
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
}

.slide:nth-child(1) { margin-left: 0px;}
.slide:nth-child(n+2) { margin-left: 20px ;}

MVC代码，显示创建每个幻灯片的部分页面。可以有1-4。每个“幻灯片不可选”都是一个包含定价列表的矩形。

<div id="slides">
                @for (int i = 0; i < @Model.Packages.Count; i++)
                {   
                    <div class="slide unselectable">
                        @Html.OurHiddenFor(model => @Model.Packages[i].Id)
                        @Html.OurPartial("CalculatePackage", @Model.Packages[i])
                    </div>
                }
            </div>

感谢您的时间和建议！

MVC 4移动站点 - 为一组滑动面板创建下一个/上一个按钮

0 个答案: