<!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. cxGrid显示行号

    定义一个类: TMyCxGrid = class(TObject) class procedure DrawIndicatorCell( Sender: TcxGridTableView; ACanv ...

  2. 【java设计模式】之 责任链（chain of resposibility）模式

    责任链模式,顾名思义,就是一条链.这个链到底是怎么运行的呢?它主要是将能够处理同一类请求的对象连成一条链,所提交的请求沿着链传递,链上的对象逐个判断是否有能力处理该请求,如果能则处理,如果不能则传递给 ...

  3. OpenStack+Ceph存储空间回收《转》

    转自:http://blog.csdn.net/wytdahu/article/details/48288681 问题描述 在OpenStack云环境的部署中,存储通常具备Thin provision ...

  4. 用HTTP协议传输媒体文件 学习

    用HTTP协议传输媒体文件可以分两个阶段,第一个阶段是Progressive Download(渐进式下载方式)阶段,第二个阶段是HTTP streaming(HTTP流化)阶段.其中,第一个阶段可以 ...

  5. android适配器Adapter

    一.什么是适配器,适配器有什么用? 适配器是AdapterView视图(如ListView - 列表视图控件.Gallery - 缩略图浏览器控件.GridView - 网格控件.Spinner - ...

  6. STL之内存处理

    说明:本文仅供学习交流,转载请标明出处,欢迎转载! STL中与内存配置相关的类是allocator类,头文件为:#include<alllocator>这是一个模板类,用于内存的分配.对象 ...

  7. git配置gitignore

    一.背景                                                                                                 ...

  8. springboot http2

    转 Spring Boot With Http2 原文链接 http://www.jianshu.com/p/3d7ac535d6a0 拓展链接 http://www.jianshu.com/p/97 ...

  9. Linux内存管理机制中buffer和cache的区别

    Linux内存管理机制中buffer和cache的区别理解linux内存管理,需要深入了解linux内存的各个参数含义和规则,下面介绍一下Linux操作系统中内存buffer和cache的区别. Fr ...

  10. silverlight打开和保存文件

    因为Silverlight是运行在浏览器中的客户端,所以对于程序的操作权限要求比较严格,以本篇的主题来说,一个表现就是不能够随意的进行文件打开和保存操作,如果在代码中直接使用Stream来操作文件,会 ...