js图片幻灯片模式切换代码

来源:互联网 发布:经纬度数据库 编辑:程序博客网 时间:2024/05/17 04:56
<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>