网页背景图片的定时切换

我们在做页面效果的时候,时常会遇到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

时间: 2024-10-13 11:57:09

网页背景图片的定时切换的相关文章

网页背景图片代码

1.(最普遍类) <style>body{background-image:url(logo.gif);background-repeat:no-repeat;background-position:center}</style> 说明:以上代码为网页背景图片固定代码!网页背景图片固定代码,这样,当向下拉网页时,网页背景图片不会跟着向上移动,达到不动的目的! 2.(综合类) 3.<P class="style6"> </P></SP

网页背景图片拉伸

解决方法有两种: 一种是CSS,使用background-size:cover实现图片的拉伸效果,但是IE8及以下版本不支持background-size,于是可以使用微软的滤镜效果,但是IE6不支持. body{background:url(bg.jpg) center center;background-size:cover;height:900px;width:100%; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(s

让网页背景图片 根据屏幕大小自动铺满

让网页背景图片 根据屏幕大小自动铺满:设置两层div,底层div当做背景使用,放置一张图片即可.<div id="background" style="position:absolute;z-index:-1;width:100%;height:100%;top:0px;left:0px;"><img src="1.jpg" width="100%" height="100%"/>&

背景图片渐变且切换

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS3全屏背景图片缩小渐变自动切换代码</title> <!-- <link rel="stylesheet prefetch" href="http://fonts.useso.com/css?family=Raleway:300">

用CSS让网页背景图片居中的方法

网页背景居中的方法有很多种的.这里介绍一些用CSS让背景图片居中的方法. 让背景图片居中的第一个方法是用像素设定,很多都用这种,但是也是最麻烦的: <div style="width:800px;height:600px;background:url(../images/logo.jpg) no-repeat 250px 270px;border:1px solid #cccccc;"></div> 第二种居中方法:用50%设定,很方便: <div sty

CSS Sprites 网页背景图片定位技术简述

很多时候我们打开一些网站的背景图片会发现是很多图标集合的一张完整的图片.这种网页使用的就是CSS Sprite,通过将多个图标整合在同一张图片,可以减少向服务器请求图片的次数,加快网页的加载速度. CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了.对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以

【CSS】css网页背景图片设置

刚学CSS,了解了下网页背景图设置,顺便记录下. 下面主要是实现背景图位置保持不变,即不随滚动条动而动的功能. body { background-image:url(images/bck.png); background-repeat:no-repeat; background-attachment:fixed; background-position:0px 0px; } background-image:背景图地址: background-repeat:图片是否重复: 参数: repeat

如何让网页背景图片完整显示

在给网页加背景图时会遇到:图片过大,只能显示出部分,不能完整的显示出来,实现不了设计的效果,怎么办? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&

html 网页背景图片根据屏幕大小CSS自动缩放

https://blog.csdn.net/coslay/article/details/47109281 腾讯微博和QQ空间的登录背景图片是根据访客的屏幕大小自动缩放的,但是好像是用JQuery代码实现的.先不说要调用jq库拖慢了网页的打开时间,而且对于兼用性不好. 前几天用CSS研究出相同效果的样式代码.无论图片多大都能根据屏幕变化(当然图片尺寸越大越好).而且在拉动网页窗体大小时会自动调节图片大小,实时交互.效果上图看不了.在这里放个连接, CSS 代码如下: #background {