<!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. C字符数组赋值(转)

    举例如下: char a[10];1.定义的时候直接用字符串赋值char a[10]="hello";注意:不能先定义再给它赋值,如 char a[10]; a[10]=" ...

  2. 轻松搞定javascript预解析机制（搞定后，一切有关变态面试题都是浮云~~）

    hey,guys!我们一起总结一下JS预解析吧! 首先,我们得搞清楚JS预解析和JS逐行执行的关系.其实它们两并不冲突,一个例子轻松理解它们的关系: 你去酒店吃饭,吃饭前你得看下菜谱,点下菜(JS预解 ...

  3. Quick-Cocos2dx 快速了解

    set_dev_envirment // */ // ]]> Cocos2dx快速了解 1. Quick-Cocos2dx 开发环境搭建 1.1. 官网: 1.2. Github: 1.3. s ...

  4. 《大话》之 装饰模式 Vs 建造者模式

    一.简介: 装饰模式:     背景:小菜要见美女娇娇,感慨自己不会着装,怕给娇娇留下坏印象               内容:动态的给一个对象添加一些额外职责               图文并茂: ...

  5. sqoop与mysql之间中文乱码

    sudo -u hive sqoop export --connect "jdbc:mysql://192.168.22.201/LauncherDB?useUnicode=true& ...

  6. hdu1166 线段树

    Problem Description C国的死对头A国这段时间正在进行军事演习,所以C国间谍头子Derek和他手下Tidy又开始忙乎了.A国在海岸线沿直线布置了N个工兵营地,Derek和Tidy的任 ...

  7. python闭包与装饰器

    转自小马哥: 闭包和装饰器充分体现了Python语法糖的优雅感觉. 在本文中,我们的实验要完成两个工作,一个是加法,一个是累计调用加法的次数,最普通的Python程序可以这么写: def valida ...

  8. Redis List命令

        命令 解释 lpush key string 在key对应list的头部添加字符串元素,返回1表示成功,0表示key存在且不是list类型. rpush key string 同上,尾插入. ...

  9. ccc array

    setInterval可以用来设置函数的执行频率 nodeList: { default:[], type:[cc.Node] } active 可以用来设置是否启用 cc.Class({ exten ...

  10. BZOJ3548 : [ONTAK2010]Party

    首先将朋友通过并查集缩起来,因为$P\geq\frac{n(n-1)}{3}$,所以最后最多剩下$46$个点. 将自相矛盾的点删掉,就变成求最大权独立集问题,这等于求补图的最大团. 然后直接用Bron ...