zoukankan      html  css  js  c++  java
  • 网页背景图片的定时切换

    我们在做页面效果的时候,时常会遇到UI为了做出好看的效果,会要求body,或者div的背景定时切换。

    如果是要做后台可以增删查改背景图的话,绝对不可以用background来设定背景图,因为这样后台是没办法改掉背景url的路径的。

    所以,要做后台可以改图片的话,就应该在html中用img还设定背景图。

    最近我在做的是一个用div的背景定时切换的效果。

    就是在头部部分,既要做到满屏,又要有定时轮换的效果。因为一开始在做这里的时候,我是用background做的,因为也不做后台该图片的功能,我就依旧用background做。

    我是用jquery做的。记得再调用之前,要导入jquery,代码如下:


    $(function(){

    (function(){

    window.timeInterval = 2000;
    window.curIndex = 0;
    window.arr = new Array();
    window.arr.push("imgs/1.jpg");
    window.arr.push("imgs/2.jpg");

    window.changeImg = function(){

    $(".first_part").css("background","url(" + window.arr[ window.curIndex ] + ")");

    window.curIndex = (window.curIndex+1) % window.arr.length;
    };

    setInterval(window.changeImg, window.timeInterval);

    })(this);

    });

    但是隔几天,我发现这样的效果切换有点生硬。最后,我终于百度到了一个jquery插件。最终效果一样,但是过程会比我好看好多。

    网址为:http://www.jq22.com/jquery-info86

  • 相关阅读:
    Linux shell(3)
    Linux shell 编写(2)
    Linux shell 编写(1)
    团队冲刺(一)
    峦码团队任务表
    电梯演讲&界面展示说明
    第一次小组会议——NABCD讨论
    开发项目&团队介绍
    Linux中查看各文件夹大小命令:du -h --max-depth=1
    shell脚本[] [[]] -n -z 的含义解析
  • 原文地址:https://www.cnblogs.com/Yirannnnnn/p/4438856.html
Copyright © 2011-2022 走看看