<!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. OVER(PARTITION BY)函数用法

    OVER(PARTITION BY)函数介绍 开窗函数               Oracle从8.1.6开始提供分析函数,分析函数用于计算基于组的某种聚合值,它和聚合函数的不同之处是:对于每个组返 ...

  2. 网页细分图结果分析（Web Page Diagnostics）

    Discuz开源论坛网页细分图结果分析(Web Page Diagnostics) 续LR实战之Discuz开源论坛项目,之前一直是创建虚拟用户脚本(Virtual User Generator)和场 ...

  3. loadrunner中切割字符串

    下面函数的作用: http://blog.csdn.net/hgj125073/article/details/8447605 通过-与: 字符切割字符串,即-与:字符已经被\0 字符取代 char  ...

  4. MySQL常用数据类型小结

    在 MySQL 中,有三种主要的类型:字符串.数字和日期/时间类型. 目录 [隐藏]  1 字符串类型 2 数值类型 3 日期和时间类型 4 使用建议 5 艺搜参考 字符串类型 CHAR 0-255字 ...

  5. express－20 REST API和JSON

    简介 "Web服务"是一个通用术语,指任何可以通过HTTP访问的应用程序编程界面(API); 我们的重点是提供"REST风格"的服务,与其交互要更直接得多. R ...

  6. Visual Studio工具栏中无法选择调试设备

    Visual Studio工具栏中无法选择调试设备 在Visual Studio工具栏中,默认显示已经识别的设备.用户可以从中选择对应的设备,进行调试和部署App.但是由于误操作,可能导致该选项丢失. ...

  7. JetS3t使用说明

    http://blog.csdn.net/hitmediaman/article/details/6636402

  8. 解决ADT升级报错

    方法一: 将https://dl-ssl.google.com/android/eclipse/ 改成 http://dl-ssl.google.com/android/eclipse/: 方法二: ...

  9. Oracle执行计划

    建立与oracle的web程序,经常性出现sql性能不高导致的问题,比如程序好好的突然数据库查询变得很慢,几乎加载不了,这时候就有可能是oracle查询计划出错的原因. <sql id=&quo ...

  10. iOS数据持久化文件读写之偏好设置

    很多iOS应用都支持偏好设置,比如保存用户名.密码.字体大小等设置,iOS提供了一套标准的解决方案来为应用加入偏好设置功能.每个应用都有个NSUserDefaults实例,通过它来存取偏好设置.比如, ...