<!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. 关于iOS 类扩展Extension的进一步理解

    很多人可能会问  iOS的分类和扩展的区别,网上很多的讲解,但是一般都是分类讲的多,而这也是我们平常比较常用的知识:但是,对于扩展,总觉得理解的朦朦胧胧,不够透彻. 这里就讲一下我自己的理解,但是这个 ...

  2. java多线程(四)之同步机制

    1.同步的前提 多个线程 多个线程使用的是同一个锁 2.同步的好处 同步的出现解决了多线程的安全问题 3.同步的弊端 当线程较多时, 因为每个线程都会去判断同步上的锁, 这样是很耗费资源的, 会降低程 ...

  3. 马老师 Linux基础入门

    总线(Bus)是计算机各种功能部件之间传送信息的公共通信干线,它是由导线组成的传输线束, 按照计算机所传输的信息种类,计算机的总线可以划分为数据总线.地址总线和控制总线,分别用来传输数据.数据地址和控 ...

  4. UltraEdit打开中文乱码

    http://hellofs.blog.51cto.com/6109153/1187548 UltraEdit很强大,但是今天发现在打开含有中文的文本时会乱码,还是在配置里找找相关的设置,可以在如图的 ...

  5. 如何在Access2007中使用日期类型查询数据

    select * from 表 where datediff("d",日期型的字段,#2008-09-01#)=0或select * from 表 where 日期型的字段 > ...

  6. 将tomcat以普通用户启动

    1.为tomcat创建一个专用启动用户 useradd -M -r -d /dev/null -s /sbin/nologin tomcat 2.编译jsvc ① 进入tomcat的bin目录下 ② ...

  7. cocos2dx 3.1从零学习（四）——内存管理(错误案例分析)

    本篇内容文字比較较多,可是这些都是建立在前面三章写代码特别是传值的时候崩溃的基础上的.可能表达的跟正确的机制有出入,还请指正. 假设有不理解的能够联系我.大家能够讨论一下,共同学习. 首先明白一个事实 ...

  8. jenkins 执行ssh 远程linux执行命令

    1.远程机器编写脚本: 脚本名称为: /app/jboss/jboss-as/logs/ALL_SERVICE_STOP.sh 功能为:停止某个服务器某个目录下面的所有应用 #!/bin/bash p ...

  9. ubuntu为python处理图片安装图片数据增强库imgaug

    1 依赖Required dependencies: six numpy scipy scikit-image (pip install -U scikit-image) OpenCV (i.e. c ...

  10. XILINX之RAM使用指南（加个人总结）

    先加点自己的总结:真双口RAM可以在任意时间访问任意地址,两个端口的地址是一样的,即共享内存和地址.这就会带来一个问题:同时读写一个地址会发生冲突.基于这个点矛盾就要设置限制条件,这个在Xilinx ...