< 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 >
</ 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 >
|