js图片幻灯片模式切换代码
2011-07-13 15:40
661 查看
<style type="text/css"> .picshow { z-index:444; position:relative; background-color:#e4f2fa; width: 100%; height: 250px } .picshow_main { position: relative; width: 690px; height: 500px; } .picshow_main .imgbig { filter: progid:dximagetransform.microsoft.wipe(gradientsize=1.0, wipestyle=4, motion=forward); width: 690px; height: 500px; } /*图片width要和picshow_main的相同即可*/ .picshow_change { position: absolute; text-align: left; bottom: 0px; height: 30px; right: 0px; left: 600px; } .picshow_change img { width:15px; height: 15px } .picshow_change a { border: 1px solid; display: block; float: left; margin-right: 5px; -display: inline } a.axx { border-color: #555 } a.axx:hover { border-color: #000 } a.axx img { filter: alpha(opacity=40); opacity: 0.4; -moz-opacity: 0.4 } a.axx:hover img { filter: alpha(opacity=100); opacity: 1.0; -moz-opacity: 1.0 } a.bxx { border-color: #000 } a.bxx:hover { border-color: #000 } img { border:0px } </style> <SCRIPT language=javascript> //图片滚动展示 Start var counts = 3; //大图,轮流播放的图片的路径 img1 = new Image(); img1.src = '../down/upload/1.jpg'; img2 = new Image(); img2.src = '../down/upload/2.jpg'; img3 = new Image(); img3.src = '../down/upload/3.jpg'; var smallImg = new Array(); //小图,右下角的1,2,3 smallImg[0] = 'http://images1.www.net.cn/static/images/index_adb1.gif'; smallImg[1] = 'http://images1.www.net.cn/static/images/index_adb2.gif'; smallImg[2] = 'http://images1.www.net.cn/static/images/index_adb3.gif'; //链接地址 url1 = new Image(); url1.src = 'http://www.baidu.cn'; //图片的链接 url2 = new Image(); url2.src = 'http://www.google.cn'; url3 = new Image(); url3.src = 'http://www.sina.cn'; //alt值 alt1 = new Image(); alt1.alt = '鼠标滑过的文字1'; //鼠标滑过图片的文字 alt2 = new Image(); alt2.alt = '鼠标滑过的文字2'; alt3 = new Image(); alt3.alt = '鼠标滑过的文字3'; ////欢迎来到标准之路. var nn = 1; var key = 0; function change_img() { if (key == 0) { key = 1; } else if (document.all) { document.getElementById("pic").filters[0].Apply(); document.getElementById("pic").filters[0].Play(duration = 2); } eval('document.getElementById("pic").src=img' + nn + '.src'); eval('document.getElementById("url").href=url' + nn + '.src'); eval('document.getElementById("pic").alt=alt' + nn + '.alt'); if (nn == 1) { document.getElementById("url").target = "_blank"; document.getElementById("url").style.cursor = "pointer"; } else { document.getElementById("url").target = "_blank" document.getElementById("url").style.cursor = "pointer" } for ( var i = 1; i <= counts; i++) { document.getElementById("xxjdjj" + i).className = 'axx'; } document.getElementById("xxjdjj" + nn).className = 'bxx'; nn++; if (nn > counts) { nn = 1; } tt = setTimeout('change_img()', 7000); } function changeimg(n) { nn = n; window.clearInterval(tt); change_img(); } function ImageShow() { document.write('<div class="picshow_main">'); document.write('<div><a id="url"><img id="pic" class="imgbig" /></a></div>'); document.write('<div class="picshow_change">'); for ( var i = 0; i < counts; i++) { document.write('<a href="javascript:changeimg(' + (i + 1) + ');" id="xxjdjj' + (i + 1) + '" class="axx" target="_self"><img src="' + smallImg[i] + '"></a>'); } document.write('</div></div>'); change_img(); } //图片滚动展示 End </SCRIPT> <SCRIPT language="javascript" type="text/javascript"> ImageShow(); </SCRIPT>
相关文章推荐
- 漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)
- 漂亮的js tab图片轮换效果代码(可自定义的幻灯片和图片缓冲切换)
- 各大门户网站Flash和JS实现的图片幻灯片切换特效代码文件下载:
- 纯js图片切换幻灯片代码
- 各大门户网站Flash和JS实现的图片幻灯片切换特效代码文件下载
- 原创JS图片放大效果(二) — 多图点击切换,鼠标移上放大 代码很美,步履不停
- jquery 图片幻灯片切换效果代码(1/2)
- css图片切换效果代码[不用js]
- 纯js实现背景图片切换效果代码
- 网站常用的一种JS的图片幻灯片特效代码
- js实现幻灯片播放图片示例代码
- js图片切换具体实现代码
- 通过WebView向html页面注入js代码,实现WebView切换白昼模式/夜间模式
- 超酷的广告图片切换代码(幻灯片图片切换)
- 一段非常简单的让图片自动切换js代码
- jQuery.nivo.slider.js 幻灯片图片切换
- 用js代码写出图片自动切换效果
- js打造图片幻灯片效果——多幅图片淡入淡出切换
- js+div实现文字滚动和图片切换效果代码
- Js图片特效:图片幻灯片切换