幻灯片 CSS 背景答案

【问题标题】：Slideshow CSS background幻灯片 CSS 背景
【发布时间】：2014-03-10 14:42:24
【问题描述】：

我正在为我的 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>

干杯！感谢您的帮助！

【问题讨论】：

检查这个答案：stackoverflow.com/questions/512054/… - 使用 jquery。然后，您需要考虑如何以及何时翻转图像
好的，我添加了这个@fablife，现在呢？它没有改变什么？干杯！
你熟悉jquery吗？你在哪里添加的？您最终需要的解决方案可能更复杂一些，例如循环和超时。每当超时触发时，您都可以使用该代码更改背景图像
我有点眼熟，我把它扔在一个脚本标签和我的HTML页面底部
要查看第一个效果，请尝试以下操作：加载html页面时会执行(document)ready函数

标签： jquery html css image slideshow

【解决方案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
});

请注意这个解决方案，因为这里已经很晚了，我不能再测试它了。当然还有更优雅的解决方案。

【讨论】：

谢谢，它不起作用，但无论如何我感谢您的帮助。干杯
如果您希望人们帮助您，您需要发布尽可能多的代码！否则，我们可能会以无数种方式产生误解。我对我的代码做了一些修改。
我是新人，我很抱歉。我从另一个用户那里找到了解决方案，但无论如何我都会在你的时间里给你一点。干杯！
很高兴您找到了解决方案！如果它不适合您的需求，您不需要接受我的解决方案...:) 太客气了，呵呵
我知道已经很晚了，但我想知道您是否对此解决方案有一个快速的答案，或者有什么方法可以为我指明方向：stackoverflow.com/questions/22293523/…

【解决方案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>

【讨论】：