Javascript CSS3背景图像的定时动画

我对CSS和HTML非常陌生，但我正在学习诀窍。现在，我的标题部分有一个背景图像，我正试图将其转化为一个幻灯片，在计时器上播放3-4个图像

我看过一些通过HTML使用图像的教程，但我设置它的方式是将CSS属性背景图像设置为我的图像

如果这没有意义，这里是CSS

.global-header {
min-height:600px;
background-image: url("Assets/BGImages/head_sandwichman.jpg");
background-size: cover;
text-align: center; 
and the HTML

<header class="container global-header">
<div class="inner-w">
<div class='rmm' data-menu-style = "minimal">
        <ul>
            <li><a href="index.html">HOME</a></li>
            <li><a href="menu.html">MENU</a></li>
            <li><a href="findus.html">FIND US</a></li>
            <li><a href="about.html">ABOUT</a></li> 
        </ul>
    </div>
    <div class="large-logo-wrap">
        <img src="Assets/Logos/Giadaslogoindexwhitebig.png" />
    </div>
</div>

.global头文件{
最小高度：600px；
背景图片：url（“Assets/bgmages/head_sandwichman.jpg”）；
背景尺寸：封面；
文本对齐：居中；
还有HTML

感谢您的帮助！

使用以下命令

 <script>
//Here use Array of images ,which you want to show, Use path you want.
var images=new Array('Assets/BGImages/head_sandwichman1.jpg','Assets/BGImages/head_sandwichman2.jpg','Assets/BGImages/head_sandwichman3.jpg');
var nextimage=0;

doSlideshow();

function doSlideshow()
{

if(nextimage>=images.length)
    nextimage=0;

$('.global-header').css('background-image','url("'+images[nextimage++]+'")').fadeIn(500,function(){setTimeout(doSlideshow,1000);});

}

</script>

//这里使用您想要显示的图像数组，使用您想要的路径。
var images=new数组（'Assets/bgmages/head_sandwichman1.jpg'、'Assets/bgmages/head_sandwichman2.jpg'、'Assets/bgmages/head_sandwichman3.jpg'）；
var-nextimage=0；
doSlideshow（）；
函数doSlideshow（）
{
if（nextimage>=images.length）
nextimage=0；
$（'.global header'）.css（'background-image'，'url（'+images[nextimage++]+''）））.fadeIn（500，function（）{setTimeout（doSlideshow，1000）；}）；
}

您将不会在carousel中使用HTML和CSS。虽然有一些很酷的实验，但我会避免在生产站点上使用它们。您很可能会使用jQuery。如果您是前端开发新手，并且希望设置滑块并进入项目的其余部分，我建议使用插件

下面是一个您可以使用的流行jQuery插件：

如果您想学习如何创建自己的滑块，请尝试遵循创建类似滑块的教程。然后尝试使用代码使其达到您想要的确切状态

---

下面是上述教程的一个示例：

我认为取决于您正在制作的动画取决于您可以使用的技术

如果要滑动图像，可以使用CSS3动画在图像之间滑动。但这意味着您必须制作一个包含所有图像的大图像，并在一个循环中更改背景图像的位置

这可能会有所帮助：

或者，您可以尝试设置不同的后台类，并使用以下命令在计时器上实现类的更改：

$(document).ready(function(){
  var seconds = 5000; // set in milliseconds
  var step = 1; // place to start
  var limit = 3; //limit of background images (remember that 0 is the start so 3 is for 4 background images)

  $(".global-header").addClass("banner"+step).fadeIn(1000);

  setInterval(function(){
    $(".global-header").fadeOut(500,function(){
       $(this).removeClass("banner"+step);
       step = (step > limit) ? 1 : step + 1;
      $(".global-header").addClass("banner"+step).fadeIn(1000);
    });
  },seconds);
});

然后对背景图像使用不同的类（我在本例中使用了.banner）：

您可以体验不同范围的J-query效果，为了简单起见，我使用了fadeIn

希望这有帮助

.banner1{
background:url(../images/something.jpg);
}
.banner2{
background:url(../images/somethingElse.jpg);
}
.banner3{
background:url(../images/soemthingElseAgain.jpg);
}