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

时间：2022-01-13 07:20:21

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)

这种方法实现会比以前的在图片外面套个div效率可高多了，代码也减少了许多。

相关文章