js大图轮播和倒计时
<!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>无标题文档</title>
<style type="text/css">
*{
margin:0px auto;
padding:0px;
}
#d1,.t{
width:100%;
height:620px;
}
.t{
display:none;
}
.dian{
float:left;
width:20px;
height:20px;
border-radius:50%;
border:1px solid #0F0;
background-color:#fff;
margin-left:10px;
position:relative;
top:-25px;
right:-550px;
}
#d2{
width:200px;
height:20px;
}
</style>
</head>
<div id="d1">
<img class="t" src="../儿子/张纪殊昱/张记殊昱/入册/新建文件夹/22.jpg" style="display:block;"/>
<img class="t" src="../儿子/张纪殊昱/张记殊昱/入册/新建文件夹/2222.jpg"/>
<img class="t" src="../儿子/张纪殊昱/张记殊昱/入册/新建文件夹/8888.jpg"/>
<img class="t" src="../儿子/张纪殊昱/张记殊昱/入册/新建文件夹/77777.jpg"/>
<img class="t" src="../儿子/张纪殊昱/张记殊昱/入册/新建文件夹/222222.jpg"/>
</div>
<div id="d2">
<div class="dian" onclick="Tiao('0')" style="background-color:#c6f"></div>
<div class="dian" onclick="Tiao('1')"></div>
<div class="dian" onclick="Tiao('2')"></div>
<div class="dian" onclick="Tiao('3')"></div>
<div class="dian" onclick="Tiao('4')"></div>
</div>
<body>
</body>
<script type="text/javascript">
var sy=0
window.setInterval("Huan()",3000);
function Huan()
{
var t=document.getElementsByClassName("t")
sy++;
if(sy>=t.length)
{
sy=0;
}
for(var i=0;i<t.length;i++)
{
t[i].style.display="none";
}
t[sy].style.display="block"; var dian=document.getElementsByClassName("dian");
for(var j=0;j<dian.length;j++)
{
dian[j].style.backgroundColor="#FFF";
}
dian[sy].style.backgroundColor="#c6f";
}
function Tiao(a)
{
sy=a;
var t=document.getElementsByClassName("t");
for(var i=0;i<t.length;i++)
{
t[i].style.display="none";
}
t[a].style.display="block";
var dian=document.getElementsByClassName("dian");
for(var j=0;j<dian.length;j++)
{
dian[j].style.backgroundColor="#fff";
}
dian[a].style.backgroundColor="#c6f";
}
</script>
</html>
倒计时
<body>
<span id="shu">10</span>
<input type="button" value="同意" disabled="disabled" id="anniu" />
</body>
<script type="text/javascript">
window.setInterval("Tiao()",1000);
//window.setTimeout("Tiao()",1000);
function Tiao()
{
var s = document.getElementById("shu");
//alert(s.innerHTML);
var n =document.getElementById("anniu"); if(parseInt(s.innerHTML)==0)
{
n.removeAttribute("disabled");
}
else
{
var x = parseInt(s.innerHTML)-1;
s.innerHTML = x;
//window.setTimeout("Tiao()",1000);
}
}
</script>
js大图轮播和倒计时的更多相关文章
- 纯原生JS大图轮播
CSS部分: CSS: <style type="text/css"> #banner { position: relative; width: 500px; heig ...
- 利用JS做网页特效——大图轮播
大图轮播完整流程代码操作: <style> * { margin: 0px; padding: 0px; ...
- [DBW]大图轮播，可通过两种方法实现
通过在div中加入表格,实现大图轮播,代码如下: 整体的思路: 1.在div中嵌入表格,设置div的宽和高,设置成图片大小,确定其位置,将图片插入表格,超出div部分隐藏 2.在js中定义一个变量接受 ...
- bootstrap大图轮播手机端不能手指滑动解决办法
网上看了很多解决办法,几乎本质都是一样的,都是引入一个滑动的js插件,加入一段js代码,即可生效,但是我试了hammer.js 和 touchSwipe.js 都不生效,也找不到原因是什么,目前在网上 ...
- Js 图片轮播渐隐效果
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)
CSS3边框: 1.CSS3圆角:border-radius 属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...
- 原生js焦点轮播图
原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...
- 原生js实现轮播图
原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...
- js实现轮播图效果(附源码)--原生js的应用
1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
随机推荐
- 【JavaScrpt】JS之数组去重
var arr = [] var peoples = [ {id:1,name:'wang'}, {id:2,name:'zhang'}, {id:2,name:'zhang'}, ] for(let ...
- Android-SD卡相关操作
SD卡相关操作 1.获取 App 文件目录 //获取 当前APP 文件路径 String path1 = this.getFilesDir().getPath(); 当前APP目录也就是应用的这个目录 ...
- 项目导入之后报错：The import javax.servlet cannot be resolved
项目导入之后报错:The import javax.servlet cannot be resolved 解决方法:在Eclipse中,右击项目,选择Build Path->configure ...
- js数组元素，获得某个元素的最大值。
var rows=[{项次:1},{项次:2},{项次:3}]; Math.max.apply(Math, rows.map(function (o) { return o.项次 })) //结果:3 ...
- 解决vue webApp使用lib-flexible和px2rem引用第三方ui库后，样式变小问题
首先,需要卸载项目中的postcss-px2rem. npm uninstall postcss-px2rem --save-dev 其次,安装postcss-px2rem-exclude npm i ...
- 新装的centos怎样显示中文界面
默认的显示英文界面,即使各种配置中都选择的chinese也没用,默认显示的还是英文. 要在终端输入 vim ~/.bashrc 编辑本用户配置文件 打开后最后一行加入 export LANG=&quo ...
- golang 学习路径
目录 一 了解 go 二 入门教程 三 安装运行环境 & IDE(goland) 四 gotour 五 简易源码解析 六 开始写代码 七 学习框架 八 惯用法 九 调优 一 了解 go 谷歌一 ...
- Qt-不调用CoInitialize-实现SDL多线程运行
使用Qt开发程序,参考的MFC的程序中有CoInitialize.结果Qt程序调用不了,导致SDL不能音视频同步.此时SDL的初始化是放在主程序里的. 把SDL的初始化部分放到了辅助线程里,运行就正常 ...
- std unorder_map insert 和 emplace的区别
std::unordered_map<int, int > map; map.insert(std::make_pair(, )); map.insert(std::make_pair(, ...
- Mysqlbinlog解析工具
Mysql的binlog日志作用是用来记录mysql内部增删改查等对mysql数据库有更新的内容的记录(对数据库的改动),对数据库的查询select或show等不会被binlog日志记录;主要用于数据 ...