另一个图像滑块 JQuery 问题

Question

我已经尝试了一段时间。我已经看过图像滑块问题了。但如果我在这里得到一些具体的帮助，我将不胜感激。请告诉我以下代码哪里出错了。

这是我的 jQuery 代码：

function slideMe {
  $('.imgcontainer').animate({"margin-left":"-= 100%"}, 2000, function () {
   if($('.imgcontainer').css("margin-left") == (-300%)) {
     $('.imgcontainer').css("margin-left", "0px");
   }
   slideMe();
  });
}
window.onload = slideMe();

这是 HTML 页面上的脚本：

<div class="fitimage">
    <div class="imgcontainer">
     <img src="img/copywrtng.jpg" class="headerimage" alt="copywriting" />
     <img src="img/copywrtng1.jpg" class="headerimage" alt="copywriting" />
     <img src="img/copywrtng2.jpg" class="headerimage" alt="copywriting" />
    </div>
</div>

这就是我对 CSS 的看法：

div.fitimage {
    width:100%;
    height:93vh;
    overflow: hidden;
}
img.headerimage {
    padding: 0;
    margin:0 auto;
    width:100%;
  /*max-height:100%;
    max-width:100%;*/
    height:93vh;
}

我的逻辑是，当每个图像占据 100% 的宽度时，当“.imgcontainer” div 以 margin-left:-100% 向左滑动时，每个图像应该从右侧一个接一个地出现，直到它到达最后一个，当它再次恢复到第一个图像时。

它不工作！

请帮忙。

Answer 1

您的“主要”问题在这一行：

$('.imgcontainer').css("margin-left") == (-300 % )
                                       // ^^^^^^^^

除了你只能使用字符串格式"-300%"，.css("margin-left")会给你一个像素值，你不能与非计算%进行比较。

另一个问题是幻灯片设置为 100% - 将是其容器的宽度，实际上可能更大（3 张幻灯片为 300%）。

解决方案：

相反，我建议您使用类似于0,1,2, 0,1... etc 的c 计数器。
然后计算溢出包装 width 和动画scrollLeft: width * counter（而不是-marginLeft）。

在父 DIV 元素上使用 display:flex，在子 DIV 元素上使用 min-width:100%;（而不是将图像放在这些 DIV 中！）

$(".imgcontainer").each(function(){ // Now you can have multiple independent sliders!

  var $gal = $(this),
      $slides = $gal.children(), // get the slides
      tot = $slides.length, // number of slides
      c = 0; // the counter we mentioned

  (function anim() { // internal animation callback function
    var w = $gal.width();
    c = ++c % tot;   // increment or loop-back counter to 0 
    $gal.delay(2000).animate({scrollLeft: w*c }, 1000, anim); // anim callback !
  }()); // << START!

});

/*QuickReset*/ *{margin:0;box-sizing:border-box;font:14px/1.4 sans-serif;} html,body{height:100%;}


.imgcontainer{
  position:relative;
  height: 93%; /* or whatever you see fit */
  display: flex;
  overflow: hidden;
}

.imgcontainer > div {
  min-width: 100%;
  background: none 50% 50% / cover;
  /* Set background-image inline (see HTML) */
  /* Or use inner images like you did */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="imgcontainer">
  <div style="background-image:url(http://placehold.it/500x340/0bf);">
    Slide 1
  </div>
  <div style="background-image:url(http://placehold.it/500x340/f0b);">
    Slide 2
  </div>
  <div style="background-image:url(http://placehold.it/500x340/b0f);">
    Slide 3
  </div>
</div>