Jquery 幻灯片CSS背景

Jquery 幻灯片CSS背景,jquery,html,css,image,slideshow,Jquery,Html,Css,Image,Slideshow,我正在寻找一种方法,使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 &

我正在寻找一种方法,使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>

干杯!谢谢你的帮助

试试这样的方法:

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
});

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

这是一个图像幻灯片的解决方案 将名称添加到图像标记中

 <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>

检查以下答案:-使用jquery。然后你需要考虑如何以及何时翻转图像。我添加了这个@fablife,现在怎么办?它没有改变什么?干杯您熟悉jquery吗?你在哪里加的?您最终需要的解决方案可能要复杂一些,比如循环和超时。每当超时触发时,您都可以使用该代码更改背景图像我有点熟悉,我将其扔到脚本标记之间,然后在HTML页面的底部查看第一个效果,请尝试以下操作:$document.readyfunction{$'.global header'[0].css'background-image','url'+YOUR_image_url+;};documentready函数将在加载html页面时执行谢谢,它不起作用,但我感谢您的帮助。干杯如果你想让人们帮助你,你需要发布尽可能多的代码!否则,我们可能会有无数种误解。我对我的代码做了一些修改。我是新来的,我道歉。我已经从另一个用户那里找到了一个解决方案,但我将在您的时间内告诉您这一点。干杯我很高兴你找到了解决办法!如果我的解决方案不适合你的需要,你不需要接受。太好了,呵呵,我知道已经晚了,但是我想知道你是否有一个快速的答案或者一个方法来为我指明方向: