Question

我正在寻找一种方法让我的CSS上的背景图像翻阅一组图像（3-4）。

无论解决方案是通过JQuery，CSS还是其他，我都愿意实现它。

我是编码新手，但这是我到目前为止所做的。

我的CSS

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

和我的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>

干杯！谢谢你的帮助！

Answer 1

尝试这样的事情：

var counter = 0;
var images = ["Assets/BGImages/head_sandwichman2.jpg", "Assets/BGImages/head_sandwich.jpg", "Assets/BGImages/head_pizza.jpg"];

function setBackground(){
  counter++;
  var selector = counter % 3; //assuming you have 3 images to slide through
  var image = 'url("' + images[selector] + '")';
  $('.global-header').css('background-image', image);

  setTimeout(setBackground(),3000); //every 3 seconds change the image
}

$(document).ready(function() {
  setTimeout(setBackground(), 3000); //start sliding 3 seconds after the page finished loading
});

请注意这个解决方案，因为它已经很晚了，我再也无法测试了。肯定有更优雅的解决方案。

Answer 2

这是图片幻灯片的解决方案为图片代码添加名称

 <div class="large-logo-wrap">
        <img src="Assets/Logos/Giadaslogoindexwhitebig.png" name="imgname"/>
  </div>

然后添加此脚本

<script>
var img1=new Image()
// Link to first image
img1.src="http://"
var img2=new Image()
// Link to second image
img2.src="http://"
var img3=new Image()
// Link to third image
img3.src="http://"
var img4=new Image()
// Link to fourth image
img4.src="http://"
var step=1
function slideImages() {
if (!(document.images))
return
// add image name 
document.images.imgname.src=eval("img"+step+".src")
if (step<4)
step++
else
step=1
setTimeout("slideImages()",2000)
}
slideImages()
</script>

幻灯片CSS背景

2 个答案: