Question

我有一个有背景图片的课，这个背景图片有固定的导航栏和一些文字。如何使此背景图像与另外两个图像一起幻灯片显示。有人可以在不损坏固定的导航栏和上面文本的情况下为我提供帮助吗？这是我的密码

      <div id="home" class="intro route bg-image" >

<nav class="navbar navbar-b navbar-trans navbar-expand-md fixed-top" id="mainNav">
    <div class="container">
      <a class="navbar-brand js-scroll" href="#page-top"><%= image_tag "logo.png",class: "logo",alt: "eric chism trail to welness logo" %></a>
      <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarDefault"
        aria-controls="navbarDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span></span>
        <span></span>
        <span></span>
      </button>
      <div class="navbar-collapse collapse justify-content-end" id="navbarDefault">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link js-scroll active" href="#home">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll" href="#about">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll" href="#service">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll" href="#work">Portfolio</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll" href="#contact">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

    <div class="overlay-itro"></div>
    <div class="intro-content display-table">
      <div class="table-cell">
         <div class="container">
          <h1 class="intro-title mb-4">Eric Chism Trail to Wellness</h1>
          <p class="intro-subtitle"> provides a customized journey to complete health and wellness</span><strong class="text-slider"></strong></p>
          <!-- <p class="pt-3"><a class="btn btn-primary btn js-scroll px-4" href="#about" role="button">Learn More</a></p> -->
        </div>
      </div>
    </div>
  </div>

css文件

    .intro {
  height: 100vh;
  position: relative;
  color: #fff;
  background-image: url(asset-path("attachment_1550437745.png"));
}

.intro .intro-content {
  text-align: center;
  position: absolute;
}

Answer 1

我创建了一个非常原始的纯CSS解决方案，对您来说是一个很好的起点。使用不同的动画和延迟，您可以实现一些非常棒的效果。

body {
  margin: 0;
  padding: 0;
}

.route {
  height: 100vh;
  position: relative;
  color: #fff;
}

.navbar {
  position: fixed;
}

.slide {
  position: relative;
  height: 100%;
  width: 33.33%;
  margin: 0;
  float: left;
}

.slide-1 {
  background-image: url(https://picsum.photos/1200/800?image=11);
}

.slide-2 {
  background-image: url(https://picsum.photos/1200/800?image=12);
}

.slide-3 {
  background-image: url(https://picsum.photos/1200/800?image=13);
}

.slideshow {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 0;
  overflow: hidden;
  color: #000;
}

.slideshow-inner {
  position: relative;
  height: 100%;
  width: 300%;
  animation: move 20s ease infinite;
}

.intro .intro-content {
  text-align: center;
  position: absolute;
}

@keyframes move {
  0% {
    transform: translate(0, 0);
  }
  33.33% {
    transform: translate(-33.33%, 0);
  }
  66.66% {
    transform: translate(-66.66%, 0);
  }
}

<div id="home" class="route bg-image">
  <div class="slideshow">
    <div class="slideshow-inner">
      <div class="slide slide-1"><span>Some Text</span></div>
      <div class="slide slide-2"><span>Some Text</span></div>
      <div class="slide slide-3"><span>Some Text</span></div>
    </div>
  </div>
  <nav class="navbar navbar-b navbar-trans navbar-expand-md fixed-top" id="mainNav">
    <div class="container">
      <div class="navbar-collapse collapse justify-content-end" id="navbarDefault">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link js-scroll active" href="#home">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll" href="#about">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll" href="#service">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll" href="#work">Portfolio</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll" href="#contact">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</div>

Answer 2

大概是指基于时间的幻灯片放映，而不是用户按下按钮的幻灯片放映。 The various options通常都使用JavaScript处理。由于您的背景元素有孩子，因此我将通过添加与新背景图像相对应的新类，并在它们之间进行切换来扩展现有代码。

    .bg1 {
      background-image: url(asset-path("img1.png"));
    }
    .bg2 {
      background-image: url(asset-path("img2.png"));
    }
    .bg3 {
      background-image: url(asset-path("img3.png"));
    }

然后将第一类添加到您的背景元素中：

<div id="home" class="intro route bg-image bg1" >

并包含JS代码以遍历各个类，如下所示-作为摘要的一部分包含在内，以便您可以看到效果。

function updateSlide() {
  const bgCount = 3; //This needs to match the number of background classes - main weakness of this snippet
  const bgElem = document.getElementById('home'); // Background element
  
  let foundClasses = []; //List of background classes found
  let bgIndex = 0;
  for(let classIndex = 0; classIndex < bgElem.classList.length; classIndex++) { // Using a full for in case the element somehow gets multiple background classes
    const thisClass = bgElem.classList.item(classIndex);
    if(thisClass.substr(0, 2) == 'bg') {
      foundClasses += thisClass;
      bgIndex = parseInt(thisClass.substr(2)) + 1;
    }
  }
  if(bgIndex > bgCount) {
    bgIndex = 1;
  }
  bgElem.classList.add('bg' + bgIndex); //Apply the new class
  bgElem.classList.remove(foundClasses); //Remove all previous background classes
}
setInterval(updateSlide, 2000); // Change every 2 seconds

#home {
  display: block;
}

.bg1 {
  background: red;
}
.bg2 {
  background: yellow;
}
.bg3 {
  background: green;
}

<div id="home" class="bg1">Test</div>

从长远来看，您希望循环脚本从Rails变量或HTML而不是硬编码值中获取背景计数。

使班级的背景图片幻灯片显示

2 个答案: