zoukankan      html  css  js  c++  java
  • 大图轮播,可通过表格实现

    通过在div中加入表格,实现大图轮播,代码如下:

    整体的思路:

    1。在div中嵌入表格,设置div的宽和高,设置成图片大小,确定其位置,将图片插入表格,超出div部分隐藏

    2.在js中定义一个变量接受left的值,并赋值为0px,即初始值

    3设置函数 function  a()

    {在函数中将接收到的值强制转化为数字,

    然后在值中减掉一张图片的宽度,

    }

    3.延迟执行,设置需要延迟的代码及延迟的时间,最后回到表格中,加入一个调用方法

    window.clearTimeout(a)   删除一个元素   a为元素名称  

    <style type="text/css">                      //style固定格式,双标签
    #a1{ 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>
    
  • 相关阅读:
    asp.net 进行发送邮箱验证
    获取微信签名,并保存在xml文件中
    webform获取微信用户的授权
    [转载]将json字符串转换成json对象
    使用authentication进行身份验证,与Forms表单登陆
    解决在IE下LABEL中IMG图片无法选中RADIO的几个方法
    php网页切图/js切图
    最近新装系统windows8.1+Mac。。。还没装驱动就遇到一堆问题。。。
    百度地图api根据定位获取附近商家(只获取屏幕内)
    ios ZBar扫二维码奇奇怪怪的错误
  • 原文地址:https://www.cnblogs.com/zhaotiancheng/p/6105981.html
Copyright © 2011-2022 走看看