Question

我正在尝试编辑网站。我是业余编码员，我有以下问题：

现在，我有一个网站，其中一个部分具有固定的背景。我想在5秒左右的时间内制作4或5个旋转，褪色图像的背景。如果代码在HTML文件中指示，我会知道如何执行此操作，但后台在样式css文件中指示。请看一下HTML：

<main class="main main-full main-startup" data-stellar-background-ratio="0.7" id="inicio">
  <div class="container">
    <div class="opener">
      <div class="text-center">
        <h1 style="font-family: sackers" class="hidden-xs">TITLE</h1>
        <h1 style="font-family: sackers; font-size:35px" class="hidden-sm hidden-md hidden-lg">TITLE</h1>
        <h1 style="font-size:20px">Subtitle</h1>
        <div class="lead-hr wow fadeIn"></div>
        <p class="lead wow fadeInUp" data-wow-delay="0.3s">Another subtitle.</p>
      </div>
    </div>
  </div>
</main>

这是相应部分的CSS：

 .main-startup{background:url("../img/bg/startup.jpg") 50% 0 no-repeat;background-size:cover;}

我不知道如何告诉css和html我想要显示每5秒钟淡入下一个图片的不同图片列表。任何人都可以帮助我吗？

提前谢谢！

编辑：

我尝试过以下jquery：

<script>
$(function () { 
    var imageArray = ['BG-1.jpg', 'BG-2.jpg', 'BG-3.jpg', 'BG-4.jpg'] 

// on page load
$('#inicio').css({ 'background-image': 'url(/img/slider/' + imageArray[Math.floor(Math.random() * imageArray.length)] + ')', 'background-size': 'cover' })

// every 10 seconds change to random image name in the array
setInterval(function () { 
    $('#inicio').css({ 'background-image': 'url(/img/slider/' + imageArray[Math.floor(Math.random() * imageArray.length)] + ')', 'background-size': 'cover' }) 
    }, 10000); 
});
</script>

但是，它不起作用。它仍然遵循主启动css代码并仅显示一个背景图片。而且我不知道如何告诉它忽略它并遵循我添加的脚本！知道我能做什么吗？

Answer 1

这是使用html和css的图像滑块的最佳示例试试这个链接here

也试试这个Link

Answer 2

这是您想要实现的目标的样本，希望它有所帮助。

$(function() {
  var count = 1;
  setInterval(function() {
    var banner = $('#inicio').removeClass('banner1 banner2 banner3 banner4 banner5').addClass('banner' + count);
    count++;
    if (count == 6) count = 1;
  }, 5000);
});

.banner1 {
  background: url('https://placeholdit.imgix.net/~text?txtsize=33&txt=banner+1&w=350&h=150') no-repeat center center/cover;
}

.banner2 {
  background: url('https://placeholdit.imgix.net/~text?txtsize=33&txt=banner+2&w=350&h=150') no-repeat center center/cover;
}

.banner3 {
  background: url('https://placeholdit.imgix.net/~text?txtsize=33&txt=banner+3&w=350&h=150') no-repeat center center/cover;
}

.banner4 {
  background: url('https://placeholdit.imgix.net/~text?txtsize=33&txt=banner+4&w=350&h=150') no-repeat center center/cover;
}

.banner5 {
  background: url('https://placeholdit.imgix.net/~text?txtsize=33&txt=banner+5&w=350&h=150') no-repeat center center/cover;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<main class="main main-full main-startup" data-stellar-background-ratio="0.7" id="inicio">
  <div class="container">
    <div class="opener">
      <div class="text-center">
        <h1 style="font-family: sackers" class="hidden-xs">TITLE</h1>
        <h1 style="font-family: sackers; font-size:35px" class="hidden-sm hidden-md hidden-lg">TITLE</h1>
        <h1 style="font-size:20px">Subtitle</h1>
        <div class="lead-hr wow fadeIn"></div>
        <p class="lead wow fadeInUp" data-wow-delay="0.3s">Another subtitle.</p>
      </div>
    </div>
  </div>
</main>

简单背景滑块淡入淡出

2 个答案: