在滑动之前将最后一张幻灯片添加到滑块的开头

Question

我有以下 javascript 对象控制我的滑块：

Slider = {
    slideWrap: "#slider ul",
    slide: "#slider ul li",
    prevTrigger: "#slider a.prev",
    nextTrigger: "#slider a.next",
    control: "#slider a.control",
    init: function() {
        jQuery(this.nextTrigger).click(this.moveRight.bind(this));
        jQuery(this.prevTrigger).click(this.moveLeft.bind(this));
    },
    moveRight: function(e) {
        e.preventDefault();
        jQuery(this.slideWrap).removeClass("no-transition");
        jQuery(this.slide).first().clone().appendTo(this.slideWrap);
        jQuery(this.slideWrap).css("marginLeft", "-100vw");
        jQuery(this.control).css("pointer-events", "none");
        setTimeout(function(){
            jQuery("#slider ul").addClass("no-transition");
            jQuery("#slider ul li").first().remove();
            jQuery("#slider ul").css("marginLeft", "0px");
            jQuery("a.control").css("pointer-events", "auto");
        }, 500);
    },
    moveLeft: function(e) {
        e.preventDefault();
        jQuery(this.slideWrap).removeClass("no-transition");
        jQuery(this.slide).last().clone().prependTo(this.slideWrap);
        jQuery(this.slideWrap).css("marginLeft", "100vw");
        setTimeout(function(){
            jQuery('#slider ul').addClass('no-transition');
            jQuery('#slider ul li').last().remove();
            jQuery('#slider ul').css("marginLeft", "0px");
            jQuery('a.control').css('pointer-events', 'auto');
        }, 500);
    }
}

当滑块向右滑动时，向右移动效果很好，克隆第一张幻灯片，将其附加到滑块的末尾，然后在超时函数中删除原始的第一张幻灯片。但是，我在向左滑动时遇到问题，因为最后一张幻灯片需要在滑块移动之前预先设置。

在这里查看我的 fiddle...https://jsfiddle.net/f2hb68tn/12/

Answer 1

你可以试试这个 jsfiddle：https://jsfiddle.net/f2hb68tn/22/.

修改后的代码如下：

moveLeft: function(e) {
    e.preventDefault();
    jQuery(this.slideWrap).addClass('no-transition');
    jQuery(this.slide).last().clone().prependTo(this.slideWrap);  // Prepend last slide
    var ctlWidth = "-" + jQuery("#slider").width() + "px";        // In pixels for IE11 
    jQuery(this.slideWrap).css("marginLeft", ctlWidth);        // Stay on current slide
    jQuery(this.control).css("pointer-events", "none");
    setTimeout(function () {
        jQuery('#slider ul').removeClass("no-transition");
        jQuery('#slider ul').css("marginLeft", "0px");     // Transition to first slide
     }, 10);                                   // Zero ms does not work well in Firefox
    setTimeout(function(){
        jQuery('#slider ul').addClass('no-transition');
        jQuery('#slider ul li').last().remove();                   // Remove last slide
        jQuery('a.control').css('pointer-events', 'auto');
    }, 500);
}

在 IE11（可能还有其他版本的 IE）中，ctlWidth 必须以像素为单位给出（例如 "-524px"）。如果您不需要支持该浏览器，可以使用 "-100vw" 代替。

在滑动之前将最后一张幻灯片添加到滑块的开头

Prepend last slide to beginning of slider before sliding

html

javascript

jquery

object

slider