<!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>JavaScript</title>

<style type="text/css">

*{

margin:0px auto;

padding:0px;

font-family:"微软雅黑";}

#tuijian{

width:760px;

height:350px;

background-repeat:no-repeat;

background-size:cover;}

.pages{

top:200px;

background-color:#000;

background-position:center;

background-repeat:no-repeat;

opacity: 0.4;

width: 30px;

height:60px;    }

#p1{

background-image:url(11.jpg);

float:left;

margin:150px 0px 0px 10px;    }

#p2{

background-image: url(22.jpg);

float:right;

margin:150px 10px 0px 0px;}

</style>

</head>

<body>

<div id="tuijian" style=" background-image:url(1.jpg);">

<div class="pages" id="p1" onclick="dodo(-1)"></div>

<div class="pages" id="p2" onclick="dodo(1)"></div>

</div>

</body>

</html>

<script language="javascript">

var jpg =new Array();

jpg[0]="url(1.jpg)";

jpg[1]="url(2.jpg)";

jpg[2]="url(3.jpg)";

var tjimg = document.getElementById("tuijian");

var xb=0;

var n=0;

function huan()

{

    xb++;

    if(xb == jpg.length)

    {

    xb=0;

    }

    tjimg.style.backgroundImage=jpg[xb];

    if(n==0)

    {

    var id = window.setTimeout("huan()",3000);

    }

}

function dodo(m)

{

    n=1;

    xb = xb+m;

    if(xb < 0)

    {        xb = jpg.length-1;

    }

    else if(xb >= jpg.length)

    {        xb = 0;

    }

    tjimg.style.backgroundImage=jpg[xb];

}

window.setTimeout("huan()",3000);

</script>

HTML——图片自动轮换和手动轮换的更多相关文章

  1. 超稳攻略！Rancher 2.3手动轮换证书，保护集群安全！

    本文转自Rancher Labs 前 言 Rancher 2.3正式发布已经一年,第一批使用Rancher 2.3的用户可能会遇到Rancher Server证书过期,但是没有自动轮换的情况.这会导致 ...

  2. JS图片自动或者手动滚动效果(支持left或者up)

    JS图片自动或者手动滚动效果(支持left或者up) JS图片自动或者手动滚动效果 在谈组件之前 来谈谈今天遇到搞笑的事情,今天上午接到一个杭州电话 0571-28001187 即说是杭州人民法院的 ...

  3. word图片自动编号与引用(转)

    http://blog.csdn.net/hunauchenym/article/details/5915616 用Word时,可能会遇到文中使用了大量的图片的情况,这时,若采用手动为图片编号的方法, ...

  4. 百度ueditor实现word图片自动转存

    官网地址http://ueditor.baidu.com Git 地址 https://github.com/fex-team/ueditor 参考博客地址 http://blog.ncmem.com ...

  5. 如何做LR自动关联和手动关联？

    一.什么时候需要关联   1.关联的含义        关联的含义A(correlation):在脚本回放过程中,客户端发出请求,通过关联函数所定义的左右边界值(也就是关联规则),在服务器所响应的内容 ...

  6. 原生js+css3实现图片自动切换，图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  7. JS图片自动和可控的轮播切换特效

    点击这里查看效果:http://hovertree.com/texiao/js/1.htm HTML文件代码如下: <!DOCTYPE html> <html xmlns=" ...

  8. IOS6屏幕旋转详解（自动旋转、手动旋转、兼容IOS6之前系统）

    转自 http://blog.csdn.net/zzfsuiye/article/details/8251060 概述: 在iOS6之前的版本中,通常使用 shouldAutorotateToInte ...

  9. 【图文详解】python爬虫实战——5分钟做个图片自动下载器

    python爬虫实战——图片自动下载器 之前介绍了那么多基本知识[Python爬虫]入门知识,(没看的先去看!!)大家也估计手痒了.想要实际做个小东西来看看,毕竟: talk is cheap sho ...

随机推荐

  1. HDUOJ------------1051Wooden Sticks

    Wooden Sticks Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  2. Pandas中DataFrame修改列名

    Pandas中DataFrame修改列名:使用 rename df = pd.read_csv('I:/Papers/consumer/codeandpaper/TmallData/result01- ...

  3. Ant build xml中的各种变量解释

    Ant build.xml中的各种变量 Ant环境变量分为四种: 1.      build.properties文件中定义的变量 2.      build.xml文件中定义的变量, 3.      ...

  4. CentOS 安装 Hadoop

    原文地址:http://www.cnblogs.com/caca/p/centos_hadoop_install.html 下载和安装   download hadoop from http://ha ...

  5. .NET 跨平台RPC框架DotNettyRPC Web后台快速开发框架（.NET Core） EasyWcf------无需配置，无需引用，动态绑定，轻松使用 C# .NET 0配置使用Wcf(半成品) C# .NET Socket 简单实用框架 C# .NET 0命令行安装Windows服务程序

    .NET 跨平台RPC框架DotNettyRPC   DotNettyRPC 1.简介 DotNettyRPC是一个基于DotNetty的跨平台RPC框架,支持.NET45以及.NET Standar ...

  6. 关于 Chrome Console 查看DOM详情细节的奇思淫巧

    我们期待打印出的dom效果如下: 但某些时候,打印出来,或者通过$0.$1.document.getElementById('####') 等方式打印出来的效果如下: 根据第一幅图我们不难看出,当打印 ...

  7. @RequestBody 处理类型 和 对象 和 json 相互转换

    1 @RequestBody 处理类型 在项目中经常看到controller 中有 @RequestBody 字样,他到底有什么作用? 一般使用表单提交数据时不需要使用@RequestBody 即可自 ...

  8. php分割字符串方法速度比較(substr/sscanf/preg_match)

    固定長度的字串(假設是 06481a63041b578d702f159f520847f8), 要照固定格式做切割, 使用 PHP 要怎麼切會比較快? 註: 要將此字串切成 => 06 / 48 ...

  9. 【转】sql server存储过程中SELECT 与 SET 对变量赋值的区别

    转自:http://www.cnblogs.com/micheng11/archive/2008/07/08/1237905.html SQL Server 中对已经定义的变量赋值的方式用两种,分别是 ...

  10. 在ISE查看各个模块消耗的资源

    这个是很多兄弟姐妹非常想知道的事情.我今天就简单和大家详细说一说.其实很简单,只是大家可能没有注意而已.把图上的-detail选定即可. 转载自:http://bbs.21ic.com/blog-73 ...