利用css3的多背景图属性实现幻灯片切换效果

最新推荐文章于 2021-12-03 08:50:56 发布

转载最新推荐文章于 2021-12-03 08:50:56 发布 · 559 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lingdublog/p/6495716.html

文章标签：

#前端 #ViewUI

本文介绍如何使用CSS3的多背景图特性结合JavaScript实现简易幻灯片效果，通过变换背景图位置达到平滑过渡，代码简洁高效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css3里关于背景的属性增加了可以添加多背景图的特性，例如：

.box{background: url(img/1.png),url(img/2.png),url(img/3.png);}

这段css代码，就给.box元素添加了三张背景图，而正因为有了这样一个功能，我们可以利用不停的变换这三张背景图的位置来实现幻灯片切换的效果。

html代码非常精简，如下：

<body>
    <div class="box">
            
    </div>
</body>

简单的给一些样式：

.box{
width: 300px;
height: 300px;
border: 1px solid #ccc;
background: url(img/1.png),url(img/2.png),url(img/3.png);  //加载三张图片
background-repeat: no-repeat;   //不重复
background-size: 100%,100%,100%;    //设定图片显示尺寸，保障充满整个div
background-position: 0 0,-500px -500px,-500px -500px;  //设置三个图片的偏移量
}

以下是js部分（jq代码）：

//把背景偏移值放在一个数组里
var arr= $('.qqq').css('backgroundPosition').split(',');
var num=0;
setInterval(function () {
//判断num值超过变成0
    if (num==arr.length) {
        num=0
    }
//先把所有的图片偏移出去
    for (var i=0;i<arr.length;i++) {
    arr[i]='-500px -500px';
    }
//把当前的图片偏移值设为0
    arr[num]='0 0';
//把弄好的数组转换成字符串，赋予样式
    var str=arr.join(',');
    $('.qqq').css('backgroundPosition',str);
    num++;
},1000)