js 图片轮转
来源:互联网 发布:excel数据保存vba代码 编辑:程序博客网 时间:2024/05/17 06:40
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head> <title></title><style type="text/css" >a { text-decoration:none; color:blue;} #div1 { width:400px; height:298px; background-color:Blue; overflow:hidden; position:absolute; top:50px; left:40px;} #div2 { filter: alpha(opacity=50); width:400px; height:20px; color:Orange; background-image: url('img/bg.jpg'); background-repeat:repeat-x; position:absolute; left:40px; top :330px; }#div3 { width:400px; height:20px; color:Blue; background-color:yellow; position:absolute; left:40px; top :350px; }img { filter: alpha(opacity=100); width:400px; height:300px;}#div2 span{ cursor:pointer;}</style><script type="text/javascript" src="my_js.js"></script><script type="text/javascript" language="javascript"> //初始化图片 var img_Array = new Array(); for (var i = 0; i < 4; i++) { img_Array[i] = new Image(); } img_Array[0].src = "img/1.jpg"; img_Array[0].text = "<a href='http://www.baidu.com'>这是第1个</a>"; img_Array[0].index = 1; img_Array[1].src = "img/2.jpg"; img_Array[1].text = "这是第2个"; img_Array[1].index = 2; img_Array[2].src = "img/3.jpg"; img_Array[2].text = "这是第3个"; img_Array[2].index = 3; img_Array[3].src = "img/4.jpg"; img_Array[3].text = "这是第4个"; img_Array[3].index = 4; //初始化时赋值,添加事件 window.onload = function () { var j = 0; var timer = null; var oimg = document.getElementById("img1"); var odiv_txt = document.getElementById("div3"); oimg.src = img_Array[0].src; odiv_txt.innerHTML = img_Array[0].text; timer = setInterval(function () { auto(j++); if (j >= 3) { j = -1; } }, 3000); var ospans = document.getElementsByTagName("span"); for (var i = 0; i < ospans.length; i++) { ospans[i].index = i; ospans[i].onmouseover = function () { this.style.backgroundColor = "black"; } ospans[i].onmouseout = function () { this.style.backgroundColor = ""; } ospans[i].onclick = function () { oimg.src = img_Array[this.index].src; odiv_txt.innerHTML = img_Array[this.index].text; clearInterval(timer); j = this.index>=3?-1:this.index; timer = setInterval(function () { auto(j++); if (j >= 3) { j = -1; } }, 3000); } } } function auto(index) { var oimg = document.getElementById("img1"); var odiv_txt = document.getElementById("div3"); oimg.src = img_Array[index + 1].src; odiv_txt.innerHTML = img_Array[index + 1].text; } </script></head><body ><div id="div1"> <img id="img1" alt="" src="" /> </div> <div id="div2" align="right"> <span> 1 </span> <span> 2 </span> <span> 3 </span> <span> 4 </span> </div> <div id="div3" align="center"> </div></body></html>
1 0
- 轮转图片显示(JS)
- js实现轮转图片
- js 图片轮转
- JS实现简单的图片轮转
- 用js做的一个图片轮转效果
- jquery图片滚动轮转
- 图片的轮转
- UI图片轮转器
- ViewPager实现图片轮转
- jquery实现图片轮转
- 原创:利用JS制作GIF动画图(及图片轮转显示效果)
- C#实现图片轮转效果
- Jquery打造AdRotator轮转图片
- flex 实现图片轮转特效
- 作业:马赛克式图片轮转
- iOS UIScrollView之轮转图片
- JQUERY图片轮转的改进版本
- 图片轮转播放器实现原理
- poj1017
- HDU 2044.一只小蜜蜂
- strstr函数用法小结
- final关键字
- 术语
- js 图片轮转
- 在unity中建立最小的shader(Minimal Shader)
- 开始记录学习过程
- POJ 2533 Longest Ordered Subsequence
- hdu1465 不容易系列之一 (递推方程)
- Pig Flatten 解包操作,解元组
- poj 1330 最近公共祖先
- 在andengine中加入ADMOB广告
- 17-留言板楼层显示