Javascript jquery背景图像样式_Javascript_Jquery_Html_Css

Javascript jquery背景图像样式

javascript jquery html css

Javascript jquery背景图像样式,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我在设置背景图像的样式时遇到了问题，我正在使用jQuery循环源代码。图像作为背景插入css中，并拉伸以覆盖整个窗口。以下是我的css： html { background: url(images/image_1.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;

我在设置背景图像的样式时遇到了问题，我正在使用jQuery循环源代码。图像作为背景插入css中，并拉伸以覆盖整个窗口。以下是我的css：

html {
    background: url(images/image_1.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

在添加jQuery交换程序之前，映像看起来与预期的一样。但是，当我添加交换程序时，css样式设置失败。封面效果似乎下降了，我留下了一张固定大小的图片。不过，这种交换非常有效。我认为jQueryCSS会添加到css中，但这几乎就像它覆盖了html元素的所有属性，只留下了背景源代码，而没有覆盖。以下是我的html和javascript的外观：

<html>

<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

<script language="javascript">
<!--
    var ctr = 0;

    $(document).ready( function () {
        nextBg();
    });

    function nextBg()
    {
        ++ctr;

        if( ctr <= 3 )
        {
            $("html").css( "background", "url(images/repurpose2/image_" + ctr + ".jpg) no-repeat center center fixed" );
            if( ctr == 3 )
                ctr = 0;
        }
    }
//-->
</script>

<link rel="stylesheet" type="text/css" href=style.css>

</head>

<body>

    <div class="image-swapper">
        <a href="#" onclick="nextBg();" />Next</a>
    </div>

</body>

</html>

我正在使用我在这里找到的背景图像交换方法：

有人能告诉我为什么我不能用style.css文件来设置html的样式吗

非常感谢


<script language="javascript">
    var ctr = 0;

    $(document).ready( function () {
        nextBg();
    });

    function nextBg()
    {   
        ++ctr;
        if( ctr <= 3 )
        {
            imageUrl = "images/repurpose2/image_" + ctr + ".jpg";
            $('html').css('background-image', 'url("' + imageUrl + '")');
            $('html').css('background-repeat', 'no-repeat');
            $('html').css('background-position', 'center');
            $('html').css('background-attachment', 'fixed');
            if( ctr == 3 )
            {
                ctr = 0;
            }

        }
    }
</script>

var-ctr=0；
$（文档）.ready（函数（）{
nextBg（）；
});
函数nextBg（）
{   
++ctr；
如果（ctr您可能只是为了更新url而践踏了所有background
属性。background
如border
和margin
是一种组合各种特定规则的速记规则，根本不需要使用，在这种情况下应该避免，因为您只想更新其中一个规则更具体的规则，背景图像

换掉：
 $("html").css( "background", "url(images/repurpose2/image_" + ctr + ".jpg) no-repeat center center fixed" );

与
请用提琴？或链接？你的Javascript控制台中有错误吗？更好的是，你能用提琴来显示这种行为吗？谢谢你们两位花时间回复。我刚把一个链接放在一起，这时我注意到下面的答案已经解决了问题。我感谢你的帮助！嘿，Ankit。谢谢你们花时间提供这个问题是。下面的建议提供了带有“背景图像”的instafix切换。我必须承认我真的不知道我在做什么-你在这里得到的东西是否比我使用的方法+下面的修复方法有所改进？再次感谢！哇。太棒了。做到了。非常感谢你，安东尼！太好了！我整天都在打苍蝇，错过了图书馆或其他的一些怪癖。动画不错，顺便说一句。动画？我完成了page合在一起-结果是这样的-。我对自己正在做的事情几乎一无所知-只是第一次学习了所有这些html/css/jsish的东西，同时将这个小小的在线架构组合组合在一起-所以这是相当业余的。非常期待javascript的工作。再次感谢。
 $("html").css( "background-image", "url(images/repurpose2/image_" + ctr + ".jpg)");