导航:首页 > 万维百科 > 网页设计自动切换背景图片

网页设计自动切换背景图片

发布时间:2021-03-05 21:29:18

1、html中怎样定时变换背景图片

一般是用脚本实现。

示例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#bg_body{
background:url(1.jpg) no-repeat center #eee;
background-attachment:fixed;
height:1000px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oBody=document.getElementById('bg_body');
var oS=oBody.style;
function BgChenge(){
oS.backgroundImage='url(2.jpg)';
};
function BgPosition(){
oS.backgroundRepeat='no-repeat';
oS.backgroundPosition='center';
oS.backgroundAttachment='fixed';
};
function LoadMethod(){
BgChenge();
BgPosition()
};
setInterval(LoadMethod,1000);
};
</script>
</head>

<body id="bg_body">

</body>
</html>

你背景图片就设置了一个.jpg再切换也是这一张图片啊
如果有多张图片比如说1-10.jpg,那就把oS.backgroundImage='url(2.jpg)';改为oS.backgroundImage='url('+(parseInt(Math.random() * 10) + 1)+'.jpg)';

2、如何实现网页背景图片自动更换

换网页背景色或图片
不知道是不是光换个背景和图片
如果要换网站整体的背景和图片风格的话
写出各种颜色下的css文件
点击按钮的时候更换相对应的css文件就可以了!

3、在网页制作是如何实现图片切换

在DreamWeaver中实现鼠标图片切换效果 可以使用 ‘鼠标经过图像’ 功能来实现
也可以用CSS控制来实现。
‘鼠标经过图像’ 功能简单明了。不需多讲,多试几次即可掌握。
现在具体讲一下 CSS控制实现 图片切换效果!
首先制作一个 ID为abc 的div 宽度50px; 高度50px; 在abc里面随便打一个字 设置一个空链接。

然后定义 abc 宽度50px; 高度50px; a标签的块形式 代码如下:
<style type="text/css">
<!--
#abc a {
height: 50px;
width: 50px;
display: block;
}
-->
</style>
<!--注意上面才是CSS代码,下面是div-->
<div id="abc"><href="#">字体</a></div>
然后设置 div的背景图片 比如图片名为 bj.gif
CSS代码变为:
<style type="text/css">
<!--
#abc a {
background-image: url(bj.gif);
height: 50px;
width: 50px;
display: block;
}
-->
</style>
最后 设置鼠标经过的样式 比如 鼠标经过图片为 bjj.gif
CSS代码 变为如下:
<style type="text/css">
<!--
#abc a {
background-image: url(bj.gif);
height: 50px;
width: 50px;
display: block;
}
#abc a:hover {
background-image: url(bjj.gif);
}
-->
</style>

4、想实现一个功能:网页背景图片每天自动更换

<html>
<body id="kk" background="1.jpg">
测试<br>
</body>

<script type="text/javascript">
// 下面是用递归写的,一定要加在网页末端,注意背景图片地址,自己根据情况改

function change(){
var myDate() = new Date()();
// 每天换背景图片
flag = myDate().getDate(); //获取当前日(1-31)
// 这句注释可以去掉看看效果,每分钟换一张图片,因为一天时间太长了不便于调试
//flag = myDate.getMinutes(); //获取当前分钟数(0-59)

var img1= document.getElementById('kk');
//比如你有三张背景图,1.jpg,2.jpg和3.jpg,
//判断时间中的日:1-31,或者1-30(还有其他的闰 年就不举例了)和3的余数
//然后加1,因为余数范围0-2
// 你的描述有点隐晦,你有几张图片轮换,什么时候显示,可以根据时间设定flag规则
flag = flag%3+1;
img1.style.background="url("+flag+".jpg)";;
// 注意函数格式:function(){函数名}
window.setTimeout(function(){change()},1000);//每隔一秒判断一次系统时间
}
change();

</script>
</html>

5、HTML网页设计中可自切换的动态图片框如何制作?

这个是用JS或者是Jquery来实现。单独用html还实现不了,当然我这里说的html是指html 4

6、怎样设置在网页中背景图片的自动更换

var imgs = ["1.jpg","图片url","图片url"];
var s = 0;

function bj(){
var by = document.getElementById("body"); //通过id获取元素
by.style.background = "url('"+imgs[s]+"')";
s++;
if(s==imgs.length){s = 0;}
};

window.onload = function(){
setInterval("bj()",1000); //每隔一秒执行一次前面方法
};

可以回参考参考 。可以简单的切换答背景

7、网页设计中如何实现图片的自动切换,好想动画效果似的,但不是插入的视频,如下图所示

试试这个图片轮播
有12345数字一起切换
有小图大图一起切换
里面有教程和源码

8、网页表格背景图片自动切换 通过js或css怎么来做

定时切换就要用到setInterval,通过选择器定位目标节点,设定样式

9、html5+css3实现图片自动切换

既然楼主的问题竟然一年没找到满意答案……

不才刚刚开始学css3,愿意跟楼主分享一下图片切换心得。 如果楼主现在已经找到了解决方案,那请楼主无视我的答案。

首先,lp52761十五级大神的答案貌似不是很确切,其实css3+html5非常强大,基本上可以脱离js,除非要做出能响应移动设备触屏事件的网站,或者我的观点也落伍了,html5+css3也可以做出触屏响应特效。

我看csdn右侧图片切换有点类似opacity的变化,那么楼主不妨用keyframes方法在opacity上做文章;例如:
先定义一个keyframe
@keyframes qiehuan {
30%{opacity:1;}
60%{opacity:0;}
}

之后为图片容器做一个类:
.container{
/*这里长宽高边框边距之类的东西你自己随便写。*/
}

然后为你的图片们定义专属类:
.tupianmen{
position:absolute;
//此处调用keyframe方法
animation:qiehuan 20s infinite;
opacity:0;
}

然后用css3独有的nth-child选择器来选择你要切换的图片
img:nth-child(4){animation-delay:0s;}
img:nth-child(3){animation-delay:5s;}
img:nth-child(2){animation-delay:10s;}
img:nth-child(1){animation-delay:15s;}

接下来你就可以写html了:
<!DOCTYPE html>
<html>
...... 略掉杂七杂八的东西......
<div class="container">

<img class="tupianmen" src="你的图片1" />
<img class="tupianmen" src="你的图片2" />
<img class="tupianmen" src="你的图片3" />
<img class="tupianmen" src="你的图片4" />

</div>

</html>
写完之后保存,查看效果如何
对了,差点忘了,如果用不同浏览器的话,可能需要简单更改一下keyframe或者animation的前缀,比如加一个-webkit-才行。

望采纳。。。

10、怎样设置在网页中背景图片的自动更换?

方法一:在html文件中设置
html的中有两个关于背景的属性,其中的background用来设置背景图片。示例如下:
如果背景图片小于网页显示窗口,那么这个背景图片会自动重复。
为保证浏览器载入网页的速度,建议尽量不要使用字节过大的图片作为背景图片。
可以参考这个网站的教程和示例:
http://www.blabla.cn/html_tutorials/045_html_bgcolor_background.html
方法二:在css文件中设置
css的背景图片属性
示例:
可以参考这个网站的教程和示例:
http://www.blabla.cn/css_tutorials/020_css_background.html
参考资料:
http://www.blabla.cn/html_tutorials/index.html

与网页设计自动切换背景图片相关的知识