首页 > 代码库 > [DBW]大图轮播,可通过两种方法实现
[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="http://www.mamicode.com/images/1.jpg" /></ td > < td >< img src="http://www.mamicode.com/images/2.jpg"/></ td > // 五张图片的宽度均为800px < td >< img src="http://www.mamicode.com/images/3.jpg"/></ td > < td >< img src="http://www.mamicode.com/images/4.jpg"/></ td > < td >< img src="http://www.mamicode.com/images/5.jpg"/></ td > </ tr > </ table > </ div > </ body > </ html > < script language="javascript"> //javascrpt固定格式,双标签元素 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]大图轮播,可通过两种方法实现
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。