通过在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中的Static class

    Java中的类可以是static吗?答案是可以.在java中我们可以有静态实例变量.静态方法.静态块.类也可以是静态的. java允许我们在一个类里面定义静态类.比如内部类(nested class) ...

  2. [安卓] 15、用NFC解锁手机并自动打开应用

    最近接到一个项目:将手机放到一个带有NFC卡的底座上手机会自动解锁,然后打开相应的应用 本人用:杭州公交通用卡做为NFC卡+Coolpad手机进行试验 效果如下: 1.手机本身带有图案锁,输对图案才能 ...

  3. ReactMix框架，让你实现一套js代码，基于ReactNative在H5，App都能完美跑起来，Write Once,Run Anywhere

    ReactNative框架推出已经有一段时间了,相信很多小伙伴都在尝试实现Write Once, Run Anywhere的梦想,比如淘宝的ReactWeb等等,但是这些框架都局限于因为ReactNa ...

  4. Office 2016 正式发布——新特性预览

    今天微软又发生了一件大事!Windows Office 2016正式发布,这标志着Windows Office 又达到了一个新的里程碑! 全新的Office 发布为Office 365 用户带来了新的 ...

  5. git rm–r folder fatal:pathspec "" did not match any files

    问题描述: 某年某月某日,在查看git库的时候,发现文件的分布和文件夹的名字是极其不合理的,所以移动和重命名了某些文件. 在删除(git rm –r folder)一个空文件夹的时候,出现错误:fat ...

  6. Sizeof的计算看内存分配

    本文记录了有关sizeof的一些计算,主要有下面的四种情况:(如有错误,敬请留言) 使用sizeof()计算普通变量所占用的内存空间 sizeof计算类对象所占用空间的大小-用到了字节对齐 sixeo ...

  7. MVVM架构~knockoutjs系列之扩展ajax验证~验证数据是否存在

    返回目录 在大部分网站里,用户名都是唯一的,即当用户注册时,如果用户输入的名字不合法,我们需要提示用户,让用户再起个新名字,而这种复杂的验证一般是通过JS来实现的,如果把它集成到ko里,那就完美了.有 ...

  8. WPF入门教程系列十三——依赖属性（三）

    四. 只读依赖属性 在以前在对于非WPF的功能来说,对于类的属性的封装中,经常会对那些希望暴露给外界只读操作的字段封装成只读属性,同样在WPF中也提供了只读属性的概念,如一些 WPF控件的依赖属性是只 ...

  9. 每天一个linux命令（8）：cp 命令

    cp命令用来复制文件或者目录,是Linux系统中最常用的命令之一.一般情况下,shell会设置一个别名,在命令行下复制文件时,如果目标文件已经存在,就会询问是否覆盖,不管你是否使用-i参数.但是如果是 ...

  10. HTML的音频和视频

    目录 [1]媒体格式 音频格式 视频格式 [2]元素 插件元素 HTML5元素 [3]HTML音频 [4]HTML视频 前面的话 多媒体元素(比如视频和音频)存储于媒体文件中,确定媒体类型的最常用的方 ...