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效率可高多了，代码也减少了许多。

利用css3的多背景图属性实现幻灯片切换效果的更多相关文章

  1. css常用属性之绝对定位、相对定位、滚动条属性、背景图属性、字体、鼠标、超链接跳转页面

    1.绝对定位position: fixed(比如广告页面向下滑动的时候,页面最上方有个标题不能随之滑动,就需要用到position: fixed,同时还需要用到一个标签(标签高度很高才会出现滚动的情况 ...

  2. 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果

    原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...

  3. css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题

    近期在负责一个微信H5 App项目,遇到一个郁闷的问题,手机浏览器查看网页时图标都是模糊的,有锯齿,电脑浏览器显示则是正常.大概知道是分辨率适配等类型的问题,后来网上查找了一些办法.大部分的解决方式都 ...

  4. CSS3制作文字背景图

    文字带上渐变色,或者说让文字透出图片.这些效果 CSS 属性也可以完成. 方法一.利用CSS3属性mix-blend-mode:lighten;实现 使用 mix-blend-mode 能够轻易实现, ...

  5. 利用media query让背景图适应不同分辨率的设备

    随着上网方式的多样化,用户选择上网的工具不再仅是PC,而可以是手机,或者平板电脑.随之而来的问题是如何让网页适应不同分辨率,这给前端工程师们带来了新的挑战,其中重要的一点是如何让图片能在不同的分辨率下 ...

  6. CSS3之body背景图平铺

    你再也不需要因为屏幕大小不同而去选择多张图片作为背景图了,css3教你做人: body { background: url('xx.jpg')top center no-repeat; backgro ...

  7. css3神奇的背景控制属性+使用颜色过渡实现漂亮的渐变效果

    css3背景图像相关 兼容性:IE9+ background-clip  背景图片绘制区域 background-clip:border-box; 内容区 <!DOCTYPE html> ...

  8. 利用css3实现超出文本指定行数与省略号效果

    <style> .text1 {/*单行*/ width:200px; overflow:hidden; text-overflow:ellipsis; -o-text-overflow: ...

  9. 利用jquery实现网站中对应栏目下面内容切换效果。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. java String字符串操作 字符串加密等

    子串加密 1,设计思想 (1)输入一个字符串 (2)通过toCharArray()的方法将字符串转换成字符数组 (3)新建一个字符数组用来存储修改后的字符数组 2,程序流程图 3,源代码 packag ...

  2. 紫书 例题 10-3 UVa 10375 （唯一分解定理）

    这道题感觉非常的秀 因为结果会很大,所以就质因数分解分开来算 非常的巧妙! #include<cstdio> #include<vector> #include<cstr ...

  3. 【转】C# 正则表达式大全

    [转]C# 正则表达式大全 前言 在网上看到一个不错的简易版正则匹配和替换的工具,现在补充进来,感觉还不错,效果如下(输入验证中文汉字的正则表达式) 在线下载   密码:5tpt 注:好像也是一位园友 ...

  4. python json及mysql——读取json文件存sql、数据库日期类型转换、终端操纵mysql及python codecs读取大文件问题

    preface: 近期帮师兄处理json文件,须要读到数据库里面,以备其兴许从数据库读取数据.数据是关于yelp站点里面的: https://github.com/Yelp/dataset-examp ...

  5. Android 解决TextVIew载入自己定义字体慢的问题

    网上非常多自己定义字体样式的代码.都是告诉应该这样做: 在自己定义控件里写,可是这样写有问题,会随着界面里自己定义控件越多.Activity载入速度越慢,太多了easy造成内存泄露问题,由于你没创建一 ...

  6. mfc 链接 access 2007 数据库

    神马也不说了,直接给出源代码和project 原理这个东西 Google  下.都出来了.自己就说下作为新手 , 1 应该打印出,链接错误原因 2 应该将数据库放到project以下,特别注意这点 给 ...

  7. Laravel-自定全局函数

    Laravel-自定全局函数 标签(空格分隔): php 习惯了 使用 ThinkPHP 框架,有一个公共方法类在代码编写上会快捷很多,所以有必要在此进行配置一番. 实现 在 app 创建文件夹 He ...

  8. hiho1515 - 数据结构 并查集

    题目链接 小Hi的学校总共有N名学生,编号1-N.学校刚刚进行了一场全校的古诗文水平测验. 学校没有公布测验的成绩,所以小Hi只能得到一些小道消息,例如X号同学的分数比Y号同学的分数高S分. 小Hi想 ...

  9. core组件进阶

    访问图像像素 存储方式 BGR连续存储有助于提升图像扫描速度. isContinuous()判断是否是连续存储. 颜色空间缩减 仅用这些颜色中具有代表性的很小的部分,就足以达到同样的效果. 将现有颜色 ...

  10. d3碰撞源码分析

    技术 d3. d3.force.d3.geom.quadtree. d3.geom.quadtree 四叉树的应用:图像处理.空间数据索引.2D中的快速碰撞检测.存储稀疏数据等,游戏编程. 上图中的数 ...