更换表格td里的背景图片js效果

最新推荐文章于 2022-01-05 18:00:31 发布
最新推荐文章于 2022-01-05 18:00:31 发布
阅读量5.1k 收藏
点赞数
分类专栏： Javascript 文章标签： transition image function stylesheet iframe border

每次打开网页和刷新都会显示不同背景（并且默认有背景，在用户屏蔽js代码时也能正常显示），可以实现幻灯片，相册的切换效果。（定时切换背景图片，同时变换效果）。

还是按习惯把代码贴出来最能说明问题了。


<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link href="css/index.css" rel="stylesheet" type="text/css">
<title>js切换背景图片幻灯片效果 zdz，流风作品</title>
<script language="javascript" src="../include/slide.js"></script>
<script language="javascript">
var image = new Array(); //定义image为图片数量的数组
var number;
var idtemp;
function init(){
}
function topimgbg(){
　　 //初始化效果，<Script Language="JavaScript">topimgbg();<\/Script> 调用代码要在id出现的下面才起作用，否则没效果
　　 image [0] = '../images/index/top/000.gif' //背景图象的路径
　　 image [1] = '../images/index/top/001.gif'
　　 image [2] = '../images/index/top/002.gif'
　　 image [3] = '../images/index/top/003.gif'
　　 number = Math.floor(Math.random() * image.length);
idtemp = document.getElementById('topimgbg');
idtemp.background=image[number];
//setTimeout("topimgbg()", 4000);//实现自动定时切换背景效果
    curImg = begImg;
    if (curImg < 0 || curImg > image.length - 1){
curImg = image.length - 1;
}
//alert("curImg = "+curImg);
    changeSlide();
    setTimeout("play()", 2000)
}

</script>
</head>

<body scroll="no" >
<table width="1024" height="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>

    <td colspan="3" id="topimgbg" background="../images/index/top/001.gif" style="background-position: left TOP;background-repeat:no-repeat;"><table width="1024" height="125" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="349">&nbsp;</td>
        <td width="580" height="47">&nbsp;</td>
        <td width="95">&nbsp;</td>
      </tr>
      <tr>
        <td rowspan="2" <td height="40" <td>&nbsp;</td>
      </tr>
      <tr>
        <td height="20">&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td></td>
        <td height="16" align="right" valign="bottom" href="#" target="_blank">Contact us</a>&nbsp;|&nbsp;<a href="#" target="_blank">Open Job</a>&nbsp;|&nbsp;<a href="#" target="_blank">BBS</a>&nbsp;</td>
        <td></td>
      </tr>
      <tr>
        <td height="2" colspan="3" </tr>
    </table></td>
</tr>
<tr>
    <td colspan="3" </tr>
<tr>
    <td width="349" height="430"><iframe src="left.html" name="left" width="100%" height="100%" align="center" scrolling="no" frameborder="0" id="left" ></iframe></td>
    <td width="580" height="430"><iframe src="main.html" name="main" width="100%" height="100%" align="center" scrolling="no" frameborder="0" id="main" ></iframe></td>
    <td width="95">&nbsp;</td>
</tr>
   <tr height="100%">
     <td width="349" height="100%">&nbsp;</td>
     <td>&nbsp;</td>
    <td>&nbsp;</td>
</tr>
</table>
<Script Language="JavaScript">topimgbg();</Script>
</body>
</html>
－－－－－－－－－－－－－－－－－－－

slide.js

－－－－－－－－－－－－－－－－－－－

/**
每次打开网页和刷新都会显示不同背景（并且默认有背景，在用户屏蔽js代码时也能正常显示）
可以实现幻灯片，相册的切换效果。（定时切换背景图片，同时变换效果）
zdz 2007-11-27
*/
var timerId = -1;
var interval = 3500;
var imgIsLoaded = false;
var flag = true;
var bFirst = false;
var curImg = 0;
var arrPreload = new Array();
var begImg = 0;
var arrPreload = new Array();
var spd = 2;
var current_transition = 28;
//幻灯片切换效果数组
var transitions = new Array;
/*
transitions[0] = "progid:DXImageTransform.Microsoft.Fade(duration=1)";
transitions[1] = "progid:DXImageTransform.Microsoft.Blinds(Duration=1,bands=20)";
transitions[2] = "progid:DXImageTransform.Microsoft.Checkerboard(Duration=1,squaresX=20,squaresY=20)";
transitions[3] = "progid:DXImageTransform.Microsoft.Strips(Duration=1,motion=rightdown)";
transitions[4] = "progid:DXImageTransform.Microsoft.Barn(Duration=1,orientation=vertical)";
transitions[5] = "progid:DXImageTransform.Microsoft.GradientWipe(duration=1)";
transitions[6] = "progid:DXImageTransform.Microsoft.Iris(Duration=1,motion=out)";
transitions[7] = "progid:DXImageTransform.Microsoft.Wheel(Duration=1,spokes=12)";
transitions[8] = "progid:DXImageTransform.Microsoft.Pixelate(maxSquare=10,duration=1)";
transitions[9] = "progid:DXImageTransform.Microsoft.RadialWipe(Duration=1,wipeStyle=clock)";
transitions[10] = "progid:DXImageTransform.Microsoft.RandomBars(Duration=1,orientation=vertical)";
transitions[11] = "progid:DXImageTransform.Microsoft.Slide(Duration=1,slideStyle=push)";
transitions[12] = "progid:DXImageTransform.Microsoft.RandomDissolve(Duration=1,orientation=vertical)";
transitions[13] = "progid:DXImageTransform.Microsoft.Spiral(Duration=1,gridSizeX=40,gridSizeY=40)";
transitions[14] = "progid:DXImageTransform.Microsoft.Stretch(Duration=1,stretchStyle=push)";
transitions[15] = "special case";
*/
transitions[0] = "progid:DXImageTransform.Microsoft.RandomDissolve()";
transitions[1] = "progid:DXImageTransform.Microsoft.Iris(irisStyle=, motion=out)";
transitions[2] = "progid:DXImageTransform.Microsoft.Iris(irisStyle=diamond, motion=in)";
transitions[3] = "progid:DXImageTransform.Microsoft.Iris(irisStyle=cross, motion=)";
transitions[4] = "progid:DXImageTransform.Microsoft.Iris(irisStyle=circle, motion=)";
transitions[5] = "progid:DXImageTransform.Microsoft.Iris(irisStyle=square, motion=out)";
transitions[6] = "progid:DXImageTransform.Microsoft.Iris(irisStyle=plus, motion=in)";
transitions[7] = "progid:DXImageTransform.Microsoft.Barn(orientation=vertial motion=in)";
transitions[8] = "progid:DXImageTransform.Microsoft.Barn(orientation=vertial motion=out)";
transitions[9] = "progid:DXImageTransform.Microsoft.Barn(orientation=horizontal motion=in)";
transitions[10] = "progid:DXImageTransform.Microsoft.Barn(orientation=horizontalmotion=out)";
transitions[11] = "progid:DXImageTransform.Microsoft.Pixelate()";
transitions[12] = "progid:DXImageTransform.Microsoft.Inset()";
transitions[13] = "progid:DXImageTransform.Microsoft.Checkerboard(Direction=left)";
transitions[14] = "progid:DXImageTransform.Microsoft.Checkerboard(Direction=right)";
transitions[15] = "progid:DXImageTransform.Microsoft.Checkerboard(Direction=down)";
transitions[16] = "progid:DXImageTransform.Microsoft.Checkerboard(Direction=up)";
transitions[17] = "progid:DXImageTransform.Microsoft.RandomBars(motion=horizontal)";
transitions[18] = "progid:DXImageTransform.Microsoft.RandomBars(motion=vertical)";
transitions[19] = "progid:DXImageTransform.Microsoft.Slide(bands=5, slideStyle=push)";
transitions[20] = "progid:DXImageTransform.Microsoft.Slide(bands=5, slidestyle=swap)";
transitions[21] = "progid:DXImageTransform.Microsoft.Slide(bands=5, slidestyle=hide)";
transitions[22] = "progid:DXImageTransform.Microsoft.Spiral()";
transitions[23] = "progid:DXImageTransform.Microsoft.Stretch(stretchStyle=push)";
transitions[24] = "progid:DXImageTransform.Microsoft.Stretch(stretchStyle=pop)";
transitions[25] = "progid:DXImageTransform.Microsoft.Fade(duration=2,overlap=0)";
transitions[26] = "progid:DXImageTransform.Microsoft.GradientWipe(duration=2,gradientSize=0.25,motion=forward )";
transitions[27] = "progid:DXImageTransform.Microsoft.Wheel(duration=2,spokes=16)";
transitions[28] = "progid:DXImageTransform.Microsoft.RadialWipe(duration=2,wipeStyle=CLOCK)";
var transition_count = 28;
var _PRELOADRANGE = 5;
function imgLoadNotify()
{
    imgIsLoaded = true;
}
function changeSlide()
{
    if (document.all)
{
   var do_transition;
   if (current_transition == (transition_count))
   {
    do_transition = Math.floor(Math.random() * transition_count);
   }
   else
   {
    do_transition = current_transition;
   }
   /**
   以下两句是在切换效果前切换背景图片的代码，number、image和idtemp要设置全局变量才可以
   */
　　 number = Math.floor(Math.random() * image.length);
   idtemp.background=image[number];
   /**
   以下两句是实现幻灯片切换效果的
   */
   document.all.topimgbg.style.filter=transitions[do_transition];
   document.all.topimgbg.filters[0].Apply();   
    }
   
    imgIsLoaded = false;
if (image.length !=0) {
   imgLoadNotify();
   if (document.all)
   { //播放幻灯片
    document.all.topimgbg.filters[0].Play();
   }
}
}
function forward()
{
imgIsLoaded = false;
if (!image[curImg+1])
{
   curImg++;
   if (curImg >= image.length)
   {
    curImg = 0;
   }
}
else
{
   curImg++;
   if (curImg >= image.length)
   {
    curImg = 0;
   }
}
changeSlide();
}
function play()
{
    if (timerId == -1)
   timerId = window.setInterval('forward();', interval);
}
function stop()
{
    window.clearInterval(timerId);
    timerId = -1;
    imgIsLoaded = true;
}
function preloadRange(intPic,intRange) {
//alert("intPic = "+intPic+" intRange = "+intRange);
for (var i=intPic; i<(intPic+intRange); i++) {
   arrPreload[i] = new Image();
   arrPreload[i].src = image[i];
   //alert(arrPreload[i]+" arrPreload[i].src = "+arrPreload[i].src);
}
return false;
}

－－－－－－－－－－－－－－－－－

注意：文件和图片的路径要设置对才能看到效果。

XMM_1030
关注
专栏目录
js实现表格隔行换色
m0_61841946的博客
10-07 311
首先创建一个表格，用来看效果 <table border="1" cellspadding="0"> <tr> <td>表头</td> <td>表头</td> <td>表头</td> <td>表头</td> &
使用JavaScript更改表格行的背景颜色
02-10 1820
提供表格数据的许多站点使用交替的背景色来增加该数据的可读性。 在开发网站时，我意识到我也想这样做。 问题？ 在我的情况下，该表不是由服务器端应用程序或脚本生成的，您可以在Web上找到大量示例。 显而易见的解决方案是对第二行进行硬编码，以确保其具有不同的背景色。 但是我希望表是动态的，以便可以在表中间添加新行，而无需更改后面各行的背景颜色属性。 我的解决方案使用JavaScript，因为C...
table的td设置背景图片
热门推荐
wtt561111的专栏
01-13 2万+
多种方法说明：如何为table的td添加一个图片作为背景
js如何实现点击更换已有img标签的图片
mini74的博客
04-02 2984
思路：首先获取到这些img这个标签，然后循环出所有的img节点，然后准备几张照片，进行循环，最后在for循环中，放入循环图片的下标 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt...
使用js 给表格奇偶行添加背景颜色
香辣虾虾
03-27 1625
效果图: &lt;table&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td colspan="3"&gt;1&lt;/td&gt; &lt;td&gt;11&lt;/td&gt; &lt;td&gt;12&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt
javascript经典特效---TD背景的变换.rar
03-08
总的来说，JavaScript实现TD背景的变换涉及了对DOM的操作、事件监听以及定时器的使用，这些是JavaScript编程的基础技能。通过灵活运用这些技术，开发者可以创造出丰富多样的网页交互效果，提升用户体验。在实际项目...
根据不同的值表格单元格显示不同的背景色
qq_45021462的博客
01-05 1507
<el-table id="table" :data="tableData" border style="width: 100%;height: 100%;" :header-cell-style="{ color: '#333', 'font-weight': '500'
jQuery表格(Table)基本操作实例分析
12-04
通过添加和移除CSS类，我们可以实现当鼠标悬停在表格行上时改变背景色的效果。定义一个`.hover` CSS类，然后使用jQuery的`hover()`函数来监听鼠标进入和离开事件，分别添加和移除这个类。 ```javascript .hover ...
js常用效果实例
03-27
这个效果是为了使表格数据更易于阅读，通过JavaScript动态地为表格的奇偶行设置不同的背景色。通过遍历表格的行（tr）并根据行索引（奇偶性）添加不同的CSS类，可以实现这个功能。 2. **menu** 在这个实例中，...
layui根据条件显示列_layui table 根据条件改变更换表格颜色 高亮显示 数据筛选...
weixin_39559895的博客
12-29 1528
请问想让当layui表格的某个字段符合某个条件的时候，让该行变颜色。这样可以实现么。layui数据表格怎么更换表格颜色layui表格 通过判断某一行中的某一列的值进行设置这一行的颜色LayUI之table数据表格获取行、行高亮等相关操作能够根据相关条件进行数据筛选、进行高亮显示对符合条件的行进行高亮显示, done: function (res, curr, count) {// 表格渲染完成之后...
当鼠标移到单元格(tr、td)背景变色 多种解决方案
zhouzilong502086525的专栏
03-23 1万+
第一种：td单元格变色，只用简单的js代码即可实现。很简洁的代码，点击即可运行该代码<br /><body><br /><table border="1px"><br /> <tr><br />  <th id="id_item1" onmouseover="this.bgColor='green'" onmouseout="this.bgColor=''">Menu Item1</th><br /> </tr><br /> <tr><br />  <th>Menu Item2</th><br /> </t
有多个按钮，点击一个变色，点击另一个变色，原来的恢复颜色的方法
11-03 2825
之前用到网上说的fouce也可行，但是失去焦点后，点击别处按钮也会恢复颜色，所以这样也行不通。后来找了好久，这个方法终于行的通。 html代码： 我是在table中加的按钮submit。 <table> <tr> <td> <input class="fla...
用js操作table(tr,td) (包括TD内容的隐藏,背景颜色和字体的设置)
Small Fish
08-28 1万+
function messageSort() {  --函数名var message=document.getElementById("message").value; --添加的内容(下面有对应的html)if(name == "" ) return; --如果添加为空,返回var row = document.createElement("tr"); //创建tr的row.setAttribute("id", name); --设置row的属性. var cell = document.createEl
如何实现背景图片自适应td大小
wygyhm的专栏
08-23 1万+
有一个颜色渐变的竖条图片bg_img.jpg，用作一个 的背景图片。 This is the content 现在的问题是 1. 当 里面的内容很短时，背景色只显示渐变色的部分 2. 当 里面的内容很长时，有些部分又没有了背景色。如果设置repeat-y,背景又很难看。 如何实现背景图片的高度根据 高度的大小自动伸缩，始终都能显示全部的渐变色? 请指教，谢谢解决方法：1、用
table td添加背景
MTT_SKY
05-14 5619
有一个颜色渐变的竖条图片bg_img.jpg，用作一个 的背景图片。      This is the content      现在的问题是  1. 当 里面的内容很短时，背景色只显示渐变色的不部分  2. 当 里面的内容很长时，有些部分又没有了背景色。如果设置repeat-y,背景又很难看。  如何实现背景图片的高度根据 高度的大小自动伸缩，始终都能显示全部的渐变色?
通过js获取按钮的背景图片，并在已有表格单位td中填入该图片
最新发布
06-08
可以使用JavaScript来获取按钮的背景图片，并将其填入表格中的td元素。 首先，可以通过`querySelector()`方法获取按钮元素，然后使用`getComputedStyle()`方法获取其背景图片属性。代码如下： ```javascript var ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值