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％的宽度，作为＆＃34; .imgcontainer＆＃34; div向左滑动，边距为左边：-100％，每个图像应该从右边一个接一个地出现，直到它再次恢复到第一个图像时到达最后一个图像。

它没有用！

请帮忙。

Answer 1

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

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

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

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

<强>解决方案：

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

在父级上使用-marginLeft，在子级DIV元素上使用display:flex（而不是将图像放在这些DIV中！）

min-width:100%;

$(".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 */
}

又一个图像滑块JQuery问题

1 个答案: