Javascript 替换给定图像数组的背景图像_Javascript_Jquery_Css

Javascript 替换给定图像数组的背景图像

javascript jquery css

Javascript 替换给定图像数组的背景图像,javascript,jquery,css,Javascript,Jquery,Css,我正在尝试为已经有图像的div设置背景图像旋转，似乎没有任何改变，我想我会检查是否有人可以看到问题，因为没有出现错误 <script> $( document ).ready(function() { setInterval(function() { var tips = [ "header.jpg", "header2.jpg", "header3.jpg", "header4

我正在尝试为已经有图像的div设置背景图像旋转，似乎没有任何改变，我想我会检查是否有人可以看到问题，因为没有出现错误

 <script>
    $( document ).ready(function() {
        setInterval(function() {
        var tips = [
        "header.jpg",
        "header2.jpg",
        "header3.jpg",
        "header4.jpg",
        "header5.jpg",

        ];
        var i = 0;
         if (i == tips.length) --i;
    $('.containercoloring').fadeTo('slow', 0.3, function()
    {
        $(this).css('background-image', 'url(' + tips[i] + ')');
    }).delay(1000).fadeTo('slow', 1);
    i++;
    }, 5 * 1000);
    });
    </script>
    <body>
    <div class="containercoloring"> </div>
    </body>


$（文档）.ready（函数（）{
setInterval（函数（）{
变量提示=[
“header.jpg”，
“header2.jpg”，
“header3.jpg”，
“header4.jpg”，
“header5.jpg”，
];
var i=0；
如果（i==tips.length）——i；
$（'.containerColor'）.fadeTo（'slow'，0.3，function（）
{
$（this.css（'background-image'，'url（'+tips[i]+'））；
}).延迟（1000）。fadeTo（'slow'，1）；
i++；
}, 5 * 1000);
});

以下是工作（更新）代码。我希望您单独导入jquery库

<script>
    $(document).ready(function() {
        var i = 0;
        setInterval(function() {
            var tips = [
                "header.jpg",
                "header2.jpg",
                "header3.jpg",
                "header4.jpg",
                "header5.jpg"
            ];
            var imageIndex = ++i % tips.length;
            $('.containercoloring').fadeTo('slow', 0.3, function() {
                $(this).css('background-image', 'url(' + tips[imageIndex] + ')');
            }).delay(1000).fadeTo('slow', 1);
        }, 5 * 1000);
    });
</script>

<body>
    <div class="containercoloring" style="height: 100px;">Image Container</div>
</body>


$（文档）.ready（函数（）{
var i=0；
setInterval（函数（）{
变量提示=[
“header.jpg”，
“header2.jpg”，
“header3.jpg”，
“header4.jpg”，
“header5.jpg”
];
var imageIndex=+i%tips.length；
$（'.containerColor'）.fadeTo（'slow'，0.3，function（）{
$（this.css（'background-image'，'url（'+tips[imageIndex]+'））；
}).延迟（1000）。fadeTo（'slow'，1）；
}, 5 * 1000);
});
图像容器

您可以在此JSFIDLE中进行测试-

希望有帮助

关于你的例子，我有一些笔记。请看下面的评论。我使用了背景色，并删除了过渡，以显示它更容易

//声明变量
变量提示=[
“#ff9000”，
“#ff0000”，
“#0099ff”
];
//柜台
var i=0；
//方向
var方向='向前'；
//间隔时间
var定时器=2000；
函数changeBackground（）{
//检查长度减去1，因为计数器从0开始
如果（i==（tips.length-1））{
方向=‘向后’；
}else如果（i==0）{
//仅当计数器再次为0时，才将方向设置回向前
方向=‘向前’；
}
$（'.containercoloring'）.css（'background-color'，tips[i]）；
//根据方向加或减
如果（方向=‘向前’）{
i++；
}否则{
我--；
}
}
$（文档）.ready（函数（）{
//将间隔保存到变量，以便以后可以停止它
var theInterval=设置间隔（更改背景、计时器）；
//运行该函数，因为执行间隔需要2000毫秒
changeBackground（）；
});
.containerColor{
高度：100px；
宽度：100px；
}

尝试将计数器（变量i=0）置于setInterval（）之外。。。提示：无论何时运行函数，您的i将始终为1，因为您在函数中声明了它。。。（只是第一次增量工作）。