0

我有一个相当简单的脚本，用于移动贷款申请网站上的一组滑动面板。面板根据用户信息（如年龄、联合或个人应用程序）以及（对于汽车贷款）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>

感谢您的时间和建议！

4

0 回答 0