通过在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="data:images/1.jpg" /></td>
<td><img  src="data:images/2.jpg"/></td>                                    // 五张图片的宽度均为800px
<td><img  src="data:images/3.jpg"/></td>
<td><img  src="data:images/4.jpg"/></td>
<td><img  src="data: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]大图轮播，可通过两种方法实现的更多相关文章

  1. JavaScript+HTML+CSS 无缝滚动轮播图的两种方式

    第一种方式 在轮播图最后添加第一张,一张重复的图片. 点击前一张,到了第一张,将父级oList移动到最后一张(也就是添加的重复的第一张),在进行后续动画. 点击下一张,到了最后一张(也就是添加的重复的 ...

  2. iOS 无限轮播图的两种实现

    首先说一下实现的思想: 用UIScrollView实现,在scrollView上添加3个UIImageView,分别用来显示上一张图片,当前显示的图片,下一张图片.scrollView在不滑动的时候永 ...

  3. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

  4. js自动轮播图片的两种循环方法（原创）

    用5个div,布局从左到右5张图片,从左到右5个div分别指定ID为img1,img2,img3,img4,img5.(背景是relative,5个div是相对于背景absolute定位) 显示如下: ...

  5. 利用JS做网页特效——大图轮播

    大图轮播完整流程代码操作: <style>            * {                margin: 0px;                padding: 0px;  ...

  6. bootstrap大图轮播手机端不能手指滑动解决办法

    网上看了很多解决办法,几乎本质都是一样的,都是引入一个滑动的js插件,加入一段js代码,即可生效,但是我试了hammer.js 和 touchSwipe.js 都不生效,也找不到原因是什么,目前在网上 ...

  7. CSS实现自适应不同大小屏幕的背景大图的两种方法（转自简书）

    CSS实现自适应不同大小屏幕的背景大图的两种方法 一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块 ...

  8. 自制按钮图标的两种方法： image sprite和svg字体文件

    用image sprite和svg字体文件这两种方法,都能够极大地减少小图形文件的数量, 从而减少服务器请求和带宽需求.提高网页的响应速度. 一.建立SVG字体文件 iconmoon 是一个在线工具, ...

  9. windows下获取IP地址的两种方法

    windows下获取IP地址的两种方法: 一种可以获取IPv4和IPv6,但是需要WSAStartup: 一种只能取到IPv4,但是不需要WSAStartup: 如下: 方法一:(可以获取IPv4和I ...

随机推荐

  1. java提高篇(十八)-----数组之一：认识JAVA数组

          噢,它明白了,河水既没有牛伯伯说的那么浅,也没有小松鼠说的那么深,只有自己亲自试过才知道!道听途说永远只能看到表明现象,只有亲自试过了,才知道它的深浅!!!!! 一.什么是数组      ...

  2. [异常解决] virtualbox从.VDI备份文件新建/恢复虚拟机（包括恢复各个备份节点）

    一.前言: ubuntu上的virtualbox中的虚拟机如果关机不当会导致整个虚拟机坏掉,而且采用各种debug方式都难以让它重新启动.这时你只能用之前备份的各个VDI文件来恢复系统了.还有另一种场 ...

  3. FastUI快速界面原型制作工具

    FastUI是一款快速制作应用程序界面原型的小工具,它之所以快,是因为它体积小巧.功能简洁实用. 在真正的应用程序(包括winform.手机app.网站等)开始编码之前,一般要先设计出原型,以便确认需 ...

  4. NanoProfiler - 适合生产环境的性能监控类库 之 实践ELK篇

    上期回顾 上一期:NanoProfiler - 适合生产环境的性能监控类库 之 大数据篇 上次介绍了NanoProfiler的大数据分析理念,一晃已经时隔一年多了,真是罪过! 有朋友问到何时开源的问题 ...

  5. IOS UIView 04- 自定义控件

    注:本人是翻译过来,并且加上本人的一点见解. 前言 本文将讨论一些自定义视图.控件的诀窍和技巧.我们先概述一下 UIKit 向我们提供的控件,并介绍一些渲染技巧.随后我们会深入到视图和其所有者之间的通 ...

  6. redis数据结构整理（二）

    摘要: 1.各个数据结构的应用举例 1.1 String类型应用举例 1.2List类型应用举例 1.3Set类型应用举例 1.4Sorted Set类型应用举例 1.5Hash类型应用举例 内容: ...

  7. EF架构~基于EF数据层的实现

    回到目录 之前写过关于实现一个完整的EF架构的文章,文章的阅读量也是满大的,自己很欣慰,但是,那篇文章是我2011年写的,所以,技术有些不成熟,所以今天把我的2014年写的EF底层架构公开一下,这个架 ...

  8. SQL将JSON转成列

    好久不写东西,这个也没什么技术含量,放上来玩玩,也许有人用的着. /** * create procedure for get all fields from json * * Mark * * 20 ...

  9. 使用Spring的Validator接口进行校验

    你可以使用Spring提供的validator接口进行对象的校验.Validator接口与Errors协同工作,在Spring做校验的时候,它会将所有的校验错误汇总到Errors对象中去. 来看这个简 ...

  10. Design4：数据库设计规范

    当数据模型从概念层转到逻辑层时,需要进行规范化设计.要想设计一个结构合理的关系型数据库,至少需要满足1NF,2NF,3NF,即第一范式,第二范式,第三范式. 1,1NF(原子性) 1NF是最基本的,数 ...