<!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. 汇编学习（五）——表处理程序

    (一)串操作指令及重复前缀 一.串操作指令: 1.串传送指令: (1)指令格式: MOVS dst,rsc MOVSB ;ES:[DI]<--DS:[SI],SI<-SI+/-,DI< ...

  2. Java学习笔记（六）——方法

    一.方法定义 1.语法: 其中: (1) 访问修饰符:方法允许被访问的权限范围, 可以是 public.protected.private 甚至可以省略 ,其中 public 表示该方法可以被其他任何 ...

  3. 配置tomcat下war包可以自压缩

    <Host name="localhost" appBase="/home/hark/web" unpackWARs="true" a ...

  4. python 的特殊方法 __str__和__repr__

    __str__和__repr__ 如果要把一个类的实例变成 str,就需要实现特殊方法__str__(): class Person(object): def __init__(self, name, ...

  5. hdu5119 dp

    题目链接: http://acm.split.hdu.edu.cn/showproblem.php?pid=5119 题意: 输入T组数据,每组数据包括两个数n和m,接下来n个数,这n个数可以随意取( ...

  6. 《DSP using MATLAB》示例Example4.14

    代码: b = [1]; a = [1, -1.5, 0.5]; % [R, p, C] = residuez(b,a) Mp = (abs(p))' Ap = (angle(p))'/pi % ch ...

  7. DSP using MATLAB示例Example3.16

    代码: b = [0.0181, 0.0543, 0.0543, 0.0181]; % filter coefficient array b a = [1.0000, -1.7600, 1.1829, ...

  8. 仓库、超市、服装、食品、批发零售手持打印PDA开单器-现场无线开单扫描 无线传输电脑

    深圳浩瀚技是一家主要从事手持数据终端硬件.软件研究.销售服务为一体的高新企业公司.公司主要销售进销存等无线开单系统.工业级手持PDA,安卓数据采集器,RFID阅读器等设备.我们秉承“诚信.敏捷.繁荣” ...

  9. Thymeleaf 集成spring

    Thymeleaf 集成spring 如需先了解Thymeleaf的单独使用,请参考<Thymeleaf模板引擎使用>一文. 依赖的jar包 Thymeleaf 已经集成了spring的3 ...

  10. git 学习笔记7--branch

    分支是git的必杀技. 站点另一个角度,分支是的快照移动有向图,刚好是拓扑排序的一种例子. basic git branch testing #创建分支 git checkout testing #切 ...