STU网页设计

学生网页作业利于table表格制作轮播大图

更新时间:2019-04-08   文章分类:网页技术课堂

使用需要修改DIV的宽度和JS的宽度判断等。
CSS部分
<style type="text/css">                      
#a1{ width:730px;height:414px;position:relative; overflow:hidden;float:left;}
#ta{ position:relative; left:0px;top:0px;transition:1s;} 
</style>
HTML部分
<div id="a1">
<table id="ta" onclick="ff()" cellpadding="0" cellspacing="0" >   
<tr>
<td><a href="news/newsi.html"><img src="img/right1.jpg" width="730px" height="414px"/></a></td>
<td><a href="http://n.miaopai.com/media/aEyWwNbUHQzUofbvs5W6YI2bzB~IWOKZ" target="_blank"><img src="img/right2.png" width="730px" height="414px"/></a></td>      
<td><img src="img/right3.jpg" width="730px" height="414px"/></td>                                
</tr>
</table>
</div>
JS特效部分
<script language="javascript">           
document.getElementById("ta").style.left="0px"    
function ff()                                 //函数,不调用不执行
{
    var ta=parseInt( document.getElementById("ta").style.left);    // 定义一个值ta,将找到的值强制转换为整数
 
         if(ta>-1460)                                                   //判断,当ta>-4320时执行的操作
         {
      document.getElementById("ta").style.left=(ta-730)+"px"             //将ta的值减去1080,(将left向左移动,原来的数是0,-800,即移动一张图的距离)
         }
         else                                                     //不满足ta>-4320时,即ta=4320时,走完五张图的时候
         {
            document.getElementById("ta").style.left="0px"     //跳回0px,即回到第一张图
         }window.setTimeout("ff()",2000)                          //延迟执行ff(),中的内容
}
   window.setTimeout("ff()",2000);                                       //延迟执行ff(),2s的时间,两秒钟换第一次图
</script>

STU网页公众号

STU网页设计专注于DW网页设计制作,学生网页设计作业,简单网页模板下载,HTML静态网页成品,网页设计代做,网站作品定制,网页毕业设计制作,学生dreamweaver网页成品...

qq code back_top

微信扫码咨询