返 回成品编号:

利用table表格制作轮播大图

利用table表格制作轮播大图

网页成品属性:

本网页成品共-页,以下为具有代表性的部分页面截图,共1张截图(点击下图可放大

网页成品介绍返回顶部

    使用需要修改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>

付款方式:淘宝付款返回顶部

相同题材成品推荐:

网页常见问题: