<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>4张图片轮换</title>

<style type="text/css">

#a{

width:800px;

height:500px;

position:relative;

top:50px;

margin:auto;

border:2px solid #609;

overflow:hidden;

}

#ta

{

position:relative;

left:0px;

top:0px;

transition:0.7s;

}

</style>

</head>

<body>

<div id="a" >

<table id="ta" cellpadding="0" cellspacing="0">

<tr height="500" >

<td><img src="data:image/1.jpg" /></td>

<td><img src="data:image/2.jpg" /></td>

</tr>

<tr height="500" >

<td><img src="data:image/3.jpg" /></td>

<td><img src="data:image/4.jpg" /></td>

</tr>

</table>

</div>

</body>

</html>

<script>

document.getElementById("ta").style.left="0px";

document.getElementById("ta").style.top="0px";

function kid()

{

var m = parseInt(document.getElementById("ta").style.left);

var n = parseInt(document.getElementById("ta").style.top);

if(m==0&&n==0)

{

document.getElementById("ta").style.left=-800+"px";

document.getElementById("ta").style.top=0+"px";

}

else if(m==-800&&n==0)

{

document.getElementById("ta").style.left=-800+"px";

document.getElementById("ta").style.top=-500+"px";

}

else if(m==-800&&n==-500)

{

document.getElementById("ta").style.left=0+"px";

document.getElementById("ta").style.top=-500+"px";

}

else if(m==0&&n==-500)

{

document.getElementById("ta").style.left=0+"px";

document.getElementById("ta").style.top=0+"px";

}

window.setTimeout("kid()",1000);

}

window.setTimeout("kid()",1000);

</script>

JS写四个图片滚动显示的效果的更多相关文章

  1. ie6,7下js动态加载图片不显示错误

    ie6,7下js动态加载图片不显示错误 先描述一下出现这种匪夷所思bug的背景: 我在页面加载的时候加载一堆小缩略图,<a href="javascript:void(0);" ...

  2. vue打包后js和css、图片不显示，引用的字体找不到问题

    vue打包后js和css.图片不显示,引用的字体找不到问题:图片一般都是背景图片. 一.vue打包出现js和css不显示问题: 1.不使用mode:'history' 2.使用mode:'histor ...

  3. jQuery点击图片放大显示原图效果

    HTML部分:<div id="append_parent"></div> JS代码部分: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...

  4. 学习EChart.js（四） 移动端显示

    ECharts.js 移动端显示 现在很多时候,我们是在用手机.pad等一些移动端设备来进行办公获取数据.所以我们的图表很多时候是需要用移动端设置来查看的,而我们的图表有时候因为数据的偏多,会出现遮挡 ...

  5. 做了一个js的拉动遮罩层，两个图片分别显示的效果

    想做成车修好了和没修好的对比,所以需要两个图片.需要用到的知识点, 1.定位 2.mouse 的事件(代码中体现) 3.鼠标指针的移动距离算法 4.css中,cursor的应用 好了,废话不多说 ,直 ...

  6. HTML+JS实现网站公告信息滚动显示

    一.可以直接使用marquee标签来实现 注意: 这个标签首先在早期的IE版本中加进来,后来逐渐被其他浏览器支持,W3C的不建议使用它. <marquee>在HTML和HTML5中都属于废 ...

  7. HTML标签实现图片滚动显示

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  8. Vue.js项目中,当图片无法显示时则显示默认图片

    使用require将图片进入,写法如下: data: () => ({logo: 'this.src="' + require('../assets/img.png') + '&quo ...

  9. JS 实现banner图的滚动和选择效果

    CSS+JS实现banner图滚动和点击切换 HTML 部分代码: <body> <div id="banner"> <div id="in ...

随机推荐

  1. windows 2003 企业版 下载地址+序列号

    迅雷地址: thunder://QUFodHRwOi8vcy5zYWZlNS5jb20vV2luZG93c1NlcnZlcjIwMDNTUDJFbnRlcnByaXNlRWRpdGlvbi5pc29a ...

  2. 智能车学习（十三）——角度控制

    一.手册代码以及图示 二.流程说明 1.角度计算函数说明 //===================================================================== ...

  3. Java学习笔记（五）——数组

    一.数组使用方法 1. 声明数组 语法: 数据类型[ ] 数组名: 或者   数据类型 数组名[ ]: 其中,数组名可以是任意合法的变量名 2. 分配空间 简单地说,就是指定数组中最多可存储多少个元素 ...

  4. Android加载大图片OOM异常解决

      尽量不要使用setImageBitmap或setImageResource或BitmapFactory.decodeResource来设置一张大图, 因为这些函数在完成decode后,最终都是通过 ...

  5. OGNL表示式使用和值栈

    另外值得参考博客:http://blog.csdn.net/resigshy/article/details/7560573 OGNL是Object Graphic Navigation Langua ...

  6. telnet时显示：允许更多到 telnet 服务器的连接。请稍候再试

    telnet时显示:允许更多到 telnet 服务器的连接.请稍候再试    解决办法: windows自带telnet服务器默认的最大连接数为2,要想修改该设置,可以在命令行键入tlntadmn c ...

  7. 静态局部变量、静态全局变量、extern全局变量、自动变量 札记

    静态局部变量 静态局部变量. 从称呼上我们可以看出,静态局部变量首先是一个局部变量,因此其只在定义它的函数内有效,冠以静态的头衔后,其生存期就被延长了,不会随着函数的返回而被撤销.我们可以这样来理解: ...

  8. free store VS heap（自由存储区VS堆）

    1. free store VS heap free store (自由存储区)和 heap (堆),在C/C++中经常会遇到.他们是否有区别呢? 偶最早发现这两个概念性问题是在<Excepti ...

  9. python操作excel表格(xlrd/xlwt)

    最近遇到一个情景,就是定期生成并发送服务器使用情况报表,按照不同维度统计,涉及python对excel的操作,上网搜罗了一番,大多大同小异,而且不太能满足需求,不过经过一番对源码的"研究&q ...

  10. 7.Android常用第三方支付

    移动支付 用户使用移动的终端完成对所购买商品或者服务的支付功能;分为近场支付(蓝牙支付,刷卡,滴卡),和远程支付(网上支付,短信支付) app支付模块 常见的支付厂商-->常见的支付方式 支付宝 ...