一、图片轮换手动和自动显示
2016-05-10 08:58
295 查看
<!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>
相关文章推荐
- https的理解并结合nginx实际部署
- 常用软件的静默安装方法
- iOS UICollectionView XIB
- 从Windows API 到 MFC浅谈
- http://www.cnblogs.com/youfan/articles/3216816.html
- 细述FTP的主动式与被动式区别
- Python 解析配置模块之ConfigParser详解
- 关于iOS截屏和保存图片
- 从QR分解到PCA,再到人脸识别
- 重建ocr(recreate ocr)mos文章NOTE:399482.1- How to Recreate OCR/Voting Disk Accidentally Deleted
- J2SE基础之在Eclipse中运行hello world
- 进制转换
- Watch out for these 10 common pitfalls of experienced Java developers & architects--转
- 18. 4Sum
- python对字符串操作
- java 学习之二 中for循环的使用注意事项
- 按比例压缩Bitmap位图文件
- [leetcode] 331. Verify Preorder Serialization of a Binary Tree 解题报告
- [BZOJ1433][ZJOI2009]假期的宿舍(最大流)
- 基本类型的类型转换