<!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. A brief introduction to Hashing and Rehashing

    偶然发现一篇哈希的综述文章,虽然是1996年写的,里面的一些评测在今天看来早已经小case了.但是今天仍然极具参考价值. 地址:http://www.drdobbs.com/database/hash ...

  2. PowerDesigner 表模型图展示列信息

    今天突然发现表模型不展示列信息了,只显示一个名称,如下图:     虽让点击表模型能看到,但我想让他本身就显示,pd默认就是会显示的,今天不知怎么了,网上找这方面的设置很难找,所以我记录下设置方法(我 ...

  3. 深度解析(一六)Floyd算法

    Floyd算法(一)之 C语言详解 本章介绍弗洛伊德算法.和以往一样,本文会先对弗洛伊德算法的理论论知识进行介绍,然后给出C语言的实现.后续再分别给出C++和Java版本的实现. 目录 1. 弗洛伊德 ...

  4. HDU 5092 DP

    DP水题 求从上到下走完,使所取得权值最小,并输出路径,若有多个满足,则输出靠右的 #include "stdio.h" #include "string.h" ...

  5. STM32 usb_mem.c和usb_sil.c文件的分析

    转:http://blog.csdn.net/u011318735/article/details/17424515 这两个c文件都还算是很简单的,先讲讲usb_mem.c这个文件.从文件名就能知道跟 ...

  6. jQuery 复选框全选/取消全选/反选

    jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...

  7. 【Android】6.3 ProgressDialog

    分类:C#.Android.VS2015: 创建日期:2016-02-08 一.简介 进度条对话框(ProgressDialog)常用于不能在短时间内快速完成的操作,显示进度条的目的是为了让用户明白程 ...

  8. 【Android】5.0 第5章 常用基本控件--本章示例主界面

    分类:C#.Android.VS2015: 创建日期:2016-02-06 这一章主要介绍Android简单控件的基本用法.本章源程序共有9个示例,这些示例都在同一个项目中. 项目名:ch05demo ...

  9. VC++ 进度条的使用

    进度条控件封装在CProcessCtrl类中 1.SetRange和SetRange32方法来设置进度条显示范围. 语法格式: void SetRange(short nLower, short nU ...

  10. mysql 5.7以上版本安装配置方法图文教程（mysql 5.7.12\mysql 5.7.13\mysql 5.7.14）(转)

    http://www.jb51.net/article/90302.htm ******************************* 这篇文章主要为大家分享了MySQL 5.7以上缩版本安装配置 ...