Question

我正在尝试创建自动播放的图像层。不幸的是，我不能完全使用多种方法来使其工作。这是我要实现的目标的一个示例。

这是我到目前为止的代码。

var mItemsCount = $(".home-m-item").length - 1;

setInterval(function() {
  var t = $(".home-m-item.active");
  t.removeClass("active");
  if (t.index() === mItemsCount) {
    $(".home-m-item:first").addClass("active");
  } else {
    t.next().addClass("active");
  }
}, 200);

var windowPathname = window.location.host,
    loader = $(".loader");

.home-m {
    position: relative;
    z-index: 3;
    padding: 0 0 200px;
    background: #111 url(assets/images/home/m-slant-bg.svg) bottom/100% 100% no-repeat;
}
        
        a, a:active, a:focus, a:hover, a:link, a:visited {
    outline: none;
}
        
    .home-m-items {
    position: absolute;
    left: 1px;
    top: 1px;
    width: calc(100% - 2px);
    height: calc(100% - 3px);
    z-index: 1;
}
        
    .home-m-item{
            width: 100%;
            height: 100%;
            positoin: absolute;
            left: 0;
            top: 0;
            background-repeat: no-repeat;
            background-size: cover;
            background-position: 50%;
            visibility: hidden;
    }
        
        .home-m-item.active{visibility:visible}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="home-m">
    <div class="home-m-items">
      <div style="background-image: url('https://rossettibev.wpengine.com/wp-content/uploads/2020/08/R-Image-1.png');" class="home-m-item"></div>
      <div style="background-image: url('https://rossettibev.wpengine.com/wp-content/uploads/2020/08/R-Image-3.png');" class="home-m-item"></div>
      <div style="background-image: url('https://rossettibev.wpengine.com/wp-content/uploads/2020/08/R-Image-3.png');" class="home-m-item"></div>
      <div style="background-image: url('https://rossettibev.wpengine.com/wp-content/uploads/2020/08/R-Image4.png');" class="home-m-item"></div>
      <div style="background-image: url('https://rossettibev.wpengine.com/wp-content/uploads/2020/08/R-Image-5.png');" class="home-m-item"></div>
    </div>
</div>

我对Javscript动画还比较陌生，因此我很肯定这与我的脚本有关。我也对可以通过关键帧实现的解决方案感到满意。

Answer 1

这是一种方法。您可以保持CSS不变，只是必须从项目div中删除visibility:hidden属性。但是我不得不说您的CSS没有响应。我在底部提供了一个响应式解决方案。您还需要将html减少到以下内容。这是一个现场演示https://codepen.io/hileamlak/pen/jOqmpmm?editors=1010

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
    
    <div class="home-m">
        <div class="home-m-items">
            <div class="home-m-item"></div>
        </div>
     </div>
</body>
</html>

您的js。

let imageCounter = 1;

setInterval(
  ()=>{
if (imageCounter>5){imageCounter = 1;}
$(".home-m-item")[0].style.backgroundImage = `url('https://rossettibev.wpengine.com/wp-content/uploads/2020/08/R-Image-${imageCounter}.png')`;
imageCounter++;

},1000)

上面的方法可以在Codepen实时演示中看到，但是我不建议将图像用作div背景，因为不可能基于图像的大小来使您的设计具有响应性，所以这就是我会做。 https://codepen.io/hileamlak/pen/MWymBXV

图片轮播

1 个答案: