<!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-----1085Holding Bin-Laden Captive!

    Holding Bin-Laden Captive! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Ja ...

  2. dokuwiki语法

    dokuwiki是一个php写的维基系统,它的插件中包含markdown插件.但是markdown语法跟dokuwiki语法混着用会出现一些bug.所以还是学一下dokuwiki的语法吧. dokuw ...

  3. iOS 即时通讯，从入门到 “放弃”？

    原文链接:http://www.jianshu.com/p/2dbb360886a8 本文会用实例的方式,将 iOS 各种 IM 的方案都简单的实现一遍.并且提供一些选型.实现细节以及优化的建议. — ...

  4. wamp2.4-- 为WAMP中的mysql设置密码密码

    WAMP安装好后,mysql密码是为空的,那么要如何修改呢?其实很简单,通过几条指令就行了,下面我就一步步来操作. 1.首先,通过WAMP打开mysql控制台.提示输入密码,因为现在是空,所以直接按回 ...

  5. python selenium +autoit实现文件上传 --实践

    upload.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&q ...

  6. JMeter学习笔记--JMeter常用测试元件

    JMeter测试计划有一个被称为“函数测试模式”的选项,如果被选择,它会使Jmeter记录来自服务器返回的每个取样的数据.如果你在测试监听器中选择一个文件,这个数据将被写入文件.如果你尝试一个较小的测 ...

  7. 存储映射I/O

    一个进程拥有独立并且连续虚拟地址空间,在32位体系结构中进程的地址空间是4G.不过,内核在管理进程的地址空间时是以内存区域为单位.内存区域是进程整个地址空间中一个独立的内存范围,它在内核中使用vm_a ...

  8. 2-05. 求集合数据的均方差（15） (数学啊 ZJU_PAT)

    题目链接:http://pat.zju.edu.cn/contests/ds/2-05 设计函数求N个给定整数的均方差.若将N个数A[]的平均值记为Avg,则均方差计算公式为: 输入格式说明: 第1行 ...

  9. redis 基本概览

    1 redis 支持5种数据类型.redis 的值是字节数组,所以他不关心具体存储的是什么. redis 的键可以是 数值 strings lists sets hashes Redis 支持诸如列表 ...

  10. C 指针改变变量值

    /** *通过指针改变局部变量值 **/ #include"stdio.h"#include"stdlib.h" void work(char* chuck){ ...