HTML——图片自动轮换和手动轮换
<!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——图片自动轮换和手动轮换的更多相关文章
- 超稳攻略!Rancher 2.3手动轮换证书,保护集群安全!
本文转自Rancher Labs 前 言 Rancher 2.3正式发布已经一年,第一批使用Rancher 2.3的用户可能会遇到Rancher Server证书过期,但是没有自动轮换的情况.这会导致 ...
- JS图片自动或者手动滚动效果(支持left或者up)
JS图片自动或者手动滚动效果(支持left或者up) JS图片自动或者手动滚动效果 在谈组件之前 来谈谈今天遇到搞笑的事情,今天上午接到一个杭州电话 0571-28001187 即说是杭州人民法院的 ...
- word图片自动编号与引用(转)
http://blog.csdn.net/hunauchenym/article/details/5915616 用Word时,可能会遇到文中使用了大量的图片的情况,这时,若采用手动为图片编号的方法, ...
- 百度ueditor实现word图片自动转存
官网地址http://ueditor.baidu.com Git 地址 https://github.com/fex-team/ueditor 参考博客地址 http://blog.ncmem.com ...
- 如何做LR自动关联和手动关联?
一.什么时候需要关联 1.关联的含义 关联的含义A(correlation):在脚本回放过程中,客户端发出请求,通过关联函数所定义的左右边界值(也就是关联规则),在服务器所响应的内容 ...
- 原生js+css3实现图片自动切换,图片轮播
运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...
- JS图片自动和可控的轮播切换特效
点击这里查看效果:http://hovertree.com/texiao/js/1.htm HTML文件代码如下: <!DOCTYPE html> <html xmlns=" ...
- IOS6屏幕旋转详解(自动旋转、手动旋转、兼容IOS6之前系统)
转自 http://blog.csdn.net/zzfsuiye/article/details/8251060 概述: 在iOS6之前的版本中,通常使用 shouldAutorotateToInte ...
- 【图文详解】python爬虫实战——5分钟做个图片自动下载器
python爬虫实战——图片自动下载器 之前介绍了那么多基本知识[Python爬虫]入门知识,(没看的先去看!!)大家也估计手痒了.想要实际做个小东西来看看,毕竟: talk is cheap sho ...
随机推荐
- A brief introduction to Hashing and Rehashing
偶然发现一篇哈希的综述文章,虽然是1996年写的,里面的一些评测在今天看来早已经小case了.但是今天仍然极具参考价值. 地址:http://www.drdobbs.com/database/hash ...
- PowerDesigner 表模型图展示列信息
今天突然发现表模型不展示列信息了,只显示一个名称,如下图: 虽让点击表模型能看到,但我想让他本身就显示,pd默认就是会显示的,今天不知怎么了,网上找这方面的设置很难找,所以我记录下设置方法(我 ...
- 深度解析(一六)Floyd算法
Floyd算法(一)之 C语言详解 本章介绍弗洛伊德算法.和以往一样,本文会先对弗洛伊德算法的理论论知识进行介绍,然后给出C语言的实现.后续再分别给出C++和Java版本的实现. 目录 1. 弗洛伊德 ...
- HDU 5092 DP
DP水题 求从上到下走完,使所取得权值最小,并输出路径,若有多个满足,则输出靠右的 #include "stdio.h" #include "string.h" ...
- STM32 usb_mem.c和usb_sil.c文件的分析
转:http://blog.csdn.net/u011318735/article/details/17424515 这两个c文件都还算是很简单的,先讲讲usb_mem.c这个文件.从文件名就能知道跟 ...
- jQuery 复选框全选/取消全选/反选
jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...
- 【Android】6.3 ProgressDialog
分类:C#.Android.VS2015: 创建日期:2016-02-08 一.简介 进度条对话框(ProgressDialog)常用于不能在短时间内快速完成的操作,显示进度条的目的是为了让用户明白程 ...
- 【Android】5.0 第5章 常用基本控件--本章示例主界面
分类:C#.Android.VS2015: 创建日期:2016-02-06 这一章主要介绍Android简单控件的基本用法.本章源程序共有9个示例,这些示例都在同一个项目中. 项目名:ch05demo ...
- VC++ 进度条的使用
进度条控件封装在CProcessCtrl类中 1.SetRange和SetRange32方法来设置进度条显示范围. 语法格式: void SetRange(short nLower, short nU ...
- 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以上缩版本安装配置 ...