<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图片幻灯片模式切换代码
最新推荐文章于 2021-08-03 22:26:59 发布