图片的自动和手动切换
2016-03-26 16:26
363 查看
<!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; padding:0px; font-family:"微软雅黑";} #tuijian{ width:940px; height:500px; background-repeat:no-repeat; margin:auto; } .pages{ line-height:500px; background-color:#000; background-position:center; background-repeat:no-repeat; opacity:0.4; width:30px; height:60px; } #p1 { background-image:url(zuo.jpg); float:left; margin:180px 0px 0px 10px;} #p2{ background-image:url(you.jpg); float:right; margin:180px 10px 0px 0px;} </style> </head> <body> <div id="tuijian" style="background-image:url(E8Z311O60R7W.jpg)"> <div class="pages" id="p1" onclick="dodo(-1)"></div> <div class="pages" id="p2" onclick="dodo(1)"></div> </div> </body> </html> <script type="text/javascript"> var jpg=new Array(); jpg[0]="url(1212.jpg)"; jpg[1]="url(1213.jpg)"; jpg[2]="url(1214.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>
View Code
相关文章推荐
- 鸟哥Linux私房菜笔记
- Java字符串操作
- 图示经典算法--自底向上的归并排序
- System.Security.SecurityException: 未找到源,但未能搜索某些或全部事件日志。不可访问的日志: Security。
- 数组的查找,反转,排序,sort排序
- 关于REST
- Crazy Rows
- eclipse代码提示
- unicode字符串转list的方法
- Link-Cut-Tree 动态树算法
- kafka源码解析之七KafkaRequestHandlerPool
- ROW_NUMBER分页
- List循环与Map循环的总结
- Java笔记---云服务使用中的报错
- css 兼容ie6,ie7,ff的fixed,元素上下端固定定位方法
- 【水题】HDU 5646
- [从头学数学] 第152节 旋转
- 【细说Java】Java的重写与隐藏
- 手机卫士 第二天
- HTML整站规划笔记