Question

这是我网站的精简版。使用移动视图，当幻灯片转换时，会有一个空白的擦除，然后下一张幻灯片进入

http://www.bootply.com/vUXtZz6HQ2

我不太明白我要做什么才能获得连续擦拭，即当下一张幻灯片将会滑落，因为它看起来像是一个连续的条带，如Bootstrap Carousel

的例子

HTML

<section class="marquee row">
  <div class="carousel slide article-slide" data-ride="carousel" data-pause="hover" id="mainPromotion" style="-webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: none;">
    <div class="carousel-inner">
          <div class="item" data-cell-id="" data-interval="7000">
            <div class="marquee-media" data-src-md="http://placehold.it/300&amp;text=A" data-src-xs="http://placehold.it/300&amp;text=A" data-link="http://placehold.it/300&amp;text=A" data-link-target="" data-link-title="A" id="marquee0"><a href="http://placehold.it/300&amp;text=A" target="" title="A" data-tracking=""><img class="marquee-image img-responsive" src="http://placehold.it/300x300&amp;text=A"></a></div>
          </div>
          <div class="item" data-cell-id="" data-interval="7000">
            <div class="marquee-media" data-src-md="http://placehold.it/300&amp;text=B" data-src-xs="http://placehold.it/300&amp;text=B" data-link="http://placehold.it/300&amp;text=B" data-link-target="" data-link-title="B" id="marquee1"><a href="http://placehold.it/300&amp;text=B" target="" title="B" data-tracking=""><img class="marquee-image img-responsive" src="http://placehold.it/300&amp;text=B"></a></div>
          </div>
          <div class="item active" data-cell-id="" data-interval="7000">
            <div class="marquee-media" data-src-md="http://placehold.it/300&amp;text=B" data-src-xs="http://placehold.it/300&amp;text=C" data-link="http://placehold.it/300&amp;text=C" data-link-target="" data-link-title="C" id="marquee2"><a href="http://placehold.it/300&amp;text=C" target="" title="C" data-tracking=""><img class="marquee-image img-responsive" src="http://placehold.it/300&amp;text=C"></a></div>
          </div>
      </div>

    <ol class="carousel-indicators clearfix">
            <li class="" data-slide-to="0" data-target="#mainPromotion">
            <img alt="A" src="http://placehold.it/300&amp;text=A">
            <p class="cell-text">A</p>
            <i class="fa fa-caret-right fa-2x"></i>
          </li>
            <li data-slide-to="1" data-target="#mainPromotion" class="">
            <img alt="B" src="http://placehold.it/300&amp;text=B">
            <p class="cell-text">B</p>
            <i class="fa fa-caret-right fa-2x"></i>
          </li>
            <li data-slide-to="2" data-target="#mainPromotion" class="active">
            <img alt="C" src="http://placehold.it/300&amp;text=C">
            <p class="cell-text">C</p>
            <i class="fa fa-caret-right fa-2x"></i>
          </li>
      </ol>
  </div>
</section>

CSS

/* CSS used here will be applied after bootstrap.css */
section.marque {
  margin-top: 10px;
}

  section.marquee .cell-text {
    color: #777777;
    position: relative;
    padding: 5px;
    font-weight: bold;
    font-family: ProximaNova, Arial, Helvetica, sans-serif;
    display: inline-block;
    float: left;
    vertical-align: middle;
    text-align: left;
    text-indent: 0;
    height: 60px;
    width: 125px;
  }

    section.marquee .cell-text:hover {
      background-color: #00543d;
      color: #ffffff;
    }



  section.marquee .carousel-control {
    background-image: none !important;
  }

  section.marquee .next.left,
  section.marquee .prev.right {
    -ms-opacity: 1;
    opacity: 1;
    z-index: 0;
  }

  section.marquee .active.left,
  section.marquee .active.right {
    -ms-opacity: 0;
    opacity: 0;
    z-index: 0;
  }

  section.marquee .article-slide .carousel-indicators {
    top: 0;
    left: 18px;
    margin-left: 0;
    margin-top: 8px;
    width: 204px;
    z-index: 0;
  }

    section.marquee .article-slide .carousel-indicators img {
    /*float: left;
    left: 0;*/
    display: inline-block;
    float: left;
    width: 70px;
    height: auto !important;
  }

  section.marquee .carousel-indicators li {
    text-indent: 0 !important;
    border: 1px solid #c0c0c0;
    display: inline-block;
    -ms-border-radius: 0;
    border-radius: 0;
    margin-bottom: 2px;
    margin-left: -2px;
    width: auto;
    height: auto !important;
    line-height: 16px;
    font-size: 15px;
    background-color: white;
    z-index: 0;
    position: relative;
  }

    section.marquee .carousel-indicators li i {
      display: none;
    }

    section.marquee .carousel-indicators li:hover .cell-text {
      background-color: #00543d;
      color: #ffffff;
    }

    section.marquee .carousel-indicators li.active .cell-text {
      color: #00543d;
    }

    section.marquee .carousel-indicators li.active:hover .cell-text {
      color: #ffffff;
    }

    section.marquee .carousel-indicators li.active {
      border: 3px solid #00543d;
      color: #00543d;
      margin-left: -1px;
      margin-bottom: -1px;
    }

      section.marquee .carousel-indicators li.active i {
        display: block;
        position: absolute;
        text-indent: 0 !important;
        right: -12px;
        top: 15px;
      }

section.marquee .edit-marquee-cell {
  position: absolute;
  top: 5px;
  left: 45%;
}

@media (min-width: 768px) and (max-width: 991px) {
    section.marquee .item img,
    section.marquee .carousel {
       width: 768px;
       height: 300px;
    }
}

@media (min-width: 1200px) {
    section.marquee .item img,
    section.marquee .carousel {
      width: 100% !important;
      height: auto !important;
    }
}

@media (min-width: 991px) {
  /* fade effect */
  section.marquee .carousel .item {
    z-index: 0;
    left: 0 !important;
    -webkit-transition: opacity .4s;
    -moz-transition: opacity .4s;
    -o-transition: opacity .4s;
    -ms-transition: opacity .4s;
    transition: opacity .4s;
  }
}


@media(max-width : 991px) {
  section.marquee .carousel-indicators li.active i,
  section.marquee .carousel-indicators img,
  section.marquee .carousel-indicators .cell-text {
    display: none !important;
  }

  section.marquee .carousel-indicators {
    position: relative !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 80px !important;
    text-align: center !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: 0;
  }


    section.marquee .carousel-indicators li {
      display: inline-block !important;
      width: 15px !important;
      height: 15px !important;
      margin: 1px !important;
      border: 1px solid #bcbcbc !important;
      -ms-border-radius: 10px !important;
      border-radius: 10px !important;
      cursor: pointer;
    }

        section.marquee .carousel-indicators li.active {
            width: 15px;
            height: 15px !important;
            background-color: #00543d !important;
        }



            backface-visibility: hidden;
            perspective: 1000;
            -webkit-backface-visibility: hidden;
            -webkit-perspective: 1000;
      }
}

的JavaScript

$(function () {
  var validFlag = false;



  $(window).on({
    "load": function() {
      if (!window.marqueeJson) return;

      var imageTemplate = Handlebars.compile($("#template-marquee-images").html());
      var fragTemplate = Handlebars.compile($("#template-marquee-frags").html());

      var compiledInner = $("section.marquee .carousel-inner");
      var compiledFrags = $("section.marquee .carousel-indicators");

      compiledInner.html(imageTemplate(window.marqueeJson));
      compiledFrags.html(fragTemplate(window.marqueeJson));

      if (window.marqueeJson.Cells.length == 1) {
        compiledFrags.remove();
        $("section.marquee .carousel-control").remove();
      }

      if (compiledInner.length > 0) {
        validFlag = true;

        var mainPromo = document.getElementById("mainPromotion");
        var mc = new window.Hammer(mainPromo);

        mc.on("swipeleft", function () {
            $(mainPromo).carousel("next");
        });
        mc.on("swiperight", function () {
            $(mainPromo).carousel("prev");
        });

        updateMarquee();

        var carouselStartPromo = function (promoPos) {
            if (!isNaN(promoPos) && (0 < promoPos) && (promoPos < 3)) {
                $('#mainPromotion').carousel(promoPos);
            } else {
                $('#mainPromotion').carousel();
            }
        };

        var t;
        var promoStart = -1;
        carouselStartPromo(promoStart);

        $('#mainPromotion').carousel('pause');
        var start = $('#mainPromotion').find('.active').attr('data-interval');

        t = setTimeout(carouselStartPromo, start - 7000);

          /* 
          This event is to fix an IE bug where the swf file does not replay when the marquee control cycles
          around. It looks ahead to the next item before the slide event happens (or to the first item, if there 
          isn't an item after the active one) and reloads the swf by re-embedding it. This only fires if the 
          useragent contains "MSIE" for Internet Explorer.
          */
        $('#mainPromotion').on('slide.bs.carousel', function () {
            if(navigator.userAgent.indexOf('MSIE') > -1){
                var params = { menu: "false", wmode: "transparent" };
                var self;

                if ($('#mainPromotion').find('.active + .item').length > 0) {
                    self = $('#mainPromotion').find('.active + .item').find('.marquee-media');
                }
                else {
                    self = $('#mainPromotion').find('.item').first().find('.marquee-media');
                }

                var flashMedia = self.attr("data-src-flv") !== undefined ? self.attr("data-src-flv") : false;

                if (flashMedia) {
                    var flashId = self.attr("id") + "-flash";
                    swfobject.embedSWF(flashMedia, flashId, "100%", "300", "9.0", false, false, params);
                }
            }
        });

        $('#mainPromotion').on('slid.bs.carousel', function () {
            clearTimeout(t);
            var duration = $('#mainPromotion').find('.active').attr('data-interval');

            $('#mainPromotion').carousel('pause');
            t = setTimeout(carouselStartPromo, duration - 7000);
        });

        /* Marquee Unit Tracking (cells tracking in handlebar helpers) */
        if (window.marqueeJson.AnalyticId.length > 1) {
          $("#mainPromotion").attr("data-tracking", window.marqueeJson.AnalyticId);
        }
      }


    },
    "resize": function() {
      if (!validFlag) return;

      waitForFinalEvent(function() {
        updateMarquee();
      }, 300, new Date().getTime());
    }
  });

  function updateMarquee() {


});

Answer 1

通过您的代码，问题是在带有这些样式的CSS中引起的

  section.marquee .next.left,
  section.marquee .prev.right {
    -ms-opacity: 1;
    opacity: 1;
    z-index: 0;
  }

  section.marquee .active.left,
  section.marquee .active.right {
    -ms-opacity: 0;
    opacity: 0;
    z-index: 0;
  }

删除这些将使其正常工作。发生的事情是opacity:0;正在直接申请，所以你只能得到一个空白的方块。

如果你想做的事情是在幻灯片上有淡出淡出效果，我认为transition : opacity 1s ease;可能会有所帮助。

见下面正在应用的课程图片。

next class being applied

Answer 2

第40行，

if (!isNaN(promoPos) && (0 < promoPos) && (promoPos < 3)) {
            $('#mainPromotion').carousel(promoPos);

按3更新4。

BootStrap连续幻灯片

2 个答案: