0

我目前正在开展一个项目，该项目涉及信息弹出窗口中的滑块。幻灯片包含仅在触摸设备上需要的信息。在桌面上它只需要显示第一张幻灯片。所以我需要做的是在桌面上停止滑块......我已经非常接近了：

$('body').on({ 'touchstart' : function(){           
} });

但由于我才刚刚开始使用 jquery，所以我正在“破解”它，而我正在做的事情会产生“不稳定”的结果。我知道如果在触摸设备上查看，我只需要处理滑块代码 - 但我不知道我应该在哪里执行此操作......

这是滑块代码：

var triggers = $('div.triggers div.trigger');
var images = $('div.slides div.slide');
var lastElem = triggers.length-1;
var mask = $('.mask div.slides');
var imgWidth = images.width();
var target;

triggers.first().addClass('selected');
mask.css('width', imgWidth*(lastElem+1) +'px');


function sliderResponse(target) {
    mask.stop(true,false).animate({'left':'-'+ imgWidth*target +'px'},300);
    triggers.removeClass('selected').eq(target).addClass('selected');
}

triggers.click(function() {
    if ( !$(this).hasClass('selected') ) {
        target = $(this).index();
        sliderResponse(target);
        resetTiming();
    }
});

$('.clickSlide.right').click(function() {
    target = $('div.triggers div.selected').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
    resetTiming();
});
$('.clickSlide.left').click(function() {
    target = $('div.triggers div.selected').index();
    lastElem = triggers.length-1;
    target === 0 ? target = lastElem : target = target-1;
    sliderResponse(target);
    resetTiming();
});

function sliderTiming() {
    target = $('div.triggers div.selected').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
}
var timingRun = setInterval(function() { sliderTiming(); },5000);
function resetTiming() {
    clearInterval(timingRun);
    timingRun = setInterval(function() { sliderTiming(); },5000);
}

所有的帮助都得到了极大的帮助！！！！谢谢 :0)

4

0 回答 0