[DBW]大图轮播，可通过两种方法实现
Posted 未将对象引用设置到对象的实例
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[DBW]大图轮播，可通过两种方法实现相关的知识，希望对你有一定的参考价值。
通过在div中加入表格，实现大图轮播，代码如下：
整体的思路：
1。在div中嵌入表格，设置div的宽和高，设置成图片大小，确定其位置，将图片插入表格，超出div部分隐藏
2.在js中定义一个变量接受left的值，并赋值为0px，即初始值
3设置函数 function a（）
{在函数中将接收到的值强制转化为数字，
然后在值中减掉一张图片的宽度，
}
3.延迟执行，设置需要延迟的代码及延迟的时间，最后回到表格中，加入一个调用方法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
<style type="text/css"> //style固定格式，双标签#a1{ width:800px; height:500px;left:150px; position:relative; overflow:hidden; margin:50px; //id为a1的div样式，超出部分隐藏 }#ta{ position:relative; left:0px; top:0px; transition:1s //ta的样式，transition：1s 为渐变时间} </style></head><body><div id="a1"><table id="ta" onclick="ff()" cellpadding="0" cellspacing="0" > //在div中，创建一个表格，每一列中放入一个图片 oncleck=‘‘ 调用方法<tr><td><img src="images/1.jpg" /></td><td><img src="images/2.jpg"/></td> // 五张图片的宽度均为800px<td><img src="images/3.jpg"/></td><td><img src="images/4.jpg"/></td><td><img src="images/5.jpg"/></td></tr></table></div></body>document.getElementById("ta").style.left="0px" //将0px这个值赋值给根据id找到的left的值function ff() //函数，不调用不执行{ var ta=parseInt( document.getElementById("ta").style.left); // 定义一个值ta，将找到的值强制转换为整数 if(ta>-3200) //判断，当ta>-3200时执行的操作 { document.getElementById("ta").style.left=(ta-800)+"px" //将ta的值减去800,（将left向左移动，原来的数是0，-800，即移动一张图的距离） } else //不满足ta>-3200时，即ta=3200时，走完五张图的时候 { document.getElementById("ta").style.left="0px" //跳回0px，即回到第一张图 }window.setTimeout("ff()",2000) //延迟执行ff（），中的内容} window.setTimeout("ff()",2000); //延迟执行ff（），2s的时间，两秒钟换第一次图</script> |
以上是关于[DBW]大图轮播，可通过两种方法实现的主要内容，如果未能解决你的问题，请参考以下文章