<!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. Java关键字native、volatile、transient

    native native是方法修饰符.Native方法是由另外一种语言(如c/c++,FORTRAN,汇编)实现的本地方法.一般用于JNI中. native关键字说明其修饰的方法是一个原生态方法,方 ...

  2. android:layout_gravity和android:gravity属性的区别（转）

    gravity的中文意思就是”重心“,就是表示view横向和纵向的停靠位置 android:gravity:是对view控件本身来说的,是用来设置view本身的文本应该显示在view的什么位置,默认值 ...

  3. 【转】Spark性能优化指南——基础篇

    http://mp.weixin.qq.com/s?__biz=MjM5NDMwNjMzNA==&mid=2651805828&idx=1&sn=2f413828d1fdc6a ...

  4. Liferay 6.2 改造系列之二十：修改默认添加用户权限及用户是否拥有个人站点的配置

    1.修改默认添加用户权限为User,而非Powers User: 在/portal-master/portal-impl/src/portal.properties文件中有如下配置: # # Inpu ...

  5. ps命令使用 进程查看

    ps命令是Process Status的缩写 用来列出系统中当前运行的那些进程.ps命令列出的是当前那些进程的快照,就是执行ps命令的那个时刻的那些进程,如果想要动态的显示进程信息,就可以使用top命 ...

  6. 分享一个漂亮WPF界面框架创作过程及其源码（转）

    本文会作为一个系列,分为以下部分来介绍: (1)见识一下这个界面框架: (2)界面框架如何进行开发: (3)辅助开发支持:Demo.模板.VsPackage制作. 框架源码如下所示. 本文介绍第(1) ...

  7. 某app客户端数字签名分析

    最近测试app时发现某app对数据包做了签名,其直接后果就导致截获的数据包没法修改,因此对该app的数字签名了进行了一次分析.

  8. Uva10328 dp(递推+高精度)

    题目链接:http://vjudge.net/contest/136499#problem/F 题意:给你一个硬币,抛掷n次,问出现连续至少k个正面向上的情况有多少种. 一个比较好理解的题解:原题中问 ...

  9. A - The Moronic Cowmpouter

    Description Inexperienced in the digital arts, the cows tried to build a calculating engine (yes, it ...

  10. 使用maven 如何生成源代码的jar包

    http://hw1287789687.iteye.com/blog/1943157