新的纯js图片幻灯交互效果 1-10等可以点击 本效果图片个数不限,图片格式不限!不用Flash动画! 本效果图片个数不限,图片格式不限!不用Flash动画!
运行代码框<div align=center style="width:250px;"> <SCRIPT language=JavaScript> <!-- //天外飞仙:79475368 //http://www.88it.net var widths=248; //焦点图片宽 var w=2; var widthss=widths+w; var heights=170; //焦点图片高 var heightss=heightss+w; var heightt=20; var counts=7; //总条数 //img1=new Image();在这里是声明了一个图片元素的对象 //后面是对图像的属性进行赋值或设置,如imgs.src="xxxx.jpg"是指定图片的索引地址. //这个代码一般用于head区,用于预加载图片,即加快图片显示. //只有用new Images()得到的图片IE7才认, //而IE6和firefox可认得imgUrl[1]="/y9q9ms7lbgbt.jpg";得到的图片 img1=new Image();img1.src='http://www.51chuqi.com/UploadFile/3/s071152313259449.jpg'; url1=new Image();url1.src='http://www.88it.net'; txt1=new Image();txt1.txt='真人试衣游戏第二击'; img2=new Image();img2.src='http://www.51chuqi.com/UploadFile/20/s071171925350492.jpg'; url2=new Image();url2.src='http://www.88it.net'; txt2=new Image();txt2.txt='同居究竟是为爱?还是为做爱?'; img3=new Image();img3.src='http://www.51chuqi.com/UploadFile/20/s0711718272176944.jpg'; url3=new Image();url3.src='http://www.88it.net'; txt3=new Image();txt3.txt='大学生一定要理解的15件事'; img4=new Image();img4.src='http://www.51chuqi.com/UploadFile/177/s0711710483048975.gif'; url4=new Image();url4.src='http://www.88it.net'; txt4=new Image();txt4.txt='木偶首相 超搞笑动画'; img5=new Image();img5.src='http://www.51chuqi.com/UploadFile/3/s071152327081285.jpg'; url5=new Image();url5.src='http://www.88it.net'; txt5=new Image();txt5.txt='耳朵里取出作弊器高科技作弊工具令专家惊'; img6=new Image();img6.src='http://www.51chuqi.com/UploadFile/177/s0711520344254613.jpg'; url6=new Image();url6.src='http://www.88it.net'; txt6=new Image();txt6.txt='西安泡泡社区 西安人的网上家园'; img7=new Image();img7.src='http://www.51chuqi.com/UploadFile/3/s0711515595459173.jpg'; url7=new Image();url7.src='http://www.88it.net'; txt7=new Image();txt7.txt='唐僧的家书:'; var nn=1; //当前所显示的滚动图 var key=0; //标识是否为第一次开始执行 var tt; //标识作用 function change_img() { if(key==0){key=1;} //如果第一次执行KEY=1,表示已经执行过一次了。 else if(document.all)//document.all仅IE6/7认识,firefox不会执行此段内容 { document.getElementById("pic").filters[0].Apply(); //将滤镜应用到对像上 document.getElementById("pic").filters[0].Play(duration=2); //开始转换 document.getElementById("pic").filters[0].Transition=23;//转换效果 } eval('document.getElementById("pic").src=img'+nn+'.src'); //替换图片 eval('document.getElementById("url").href=url'+nn+'.src'); //替换URL eval('document.getElementById("title").value=txt'+nn+'.txt'); //替换ALT for (var i=1;i<=counts;i++) { document.getElementById("xxjdjj"+i).className='axx'; //将下面黑条上的所有链接变为未选中状态 } document.getElementById("xxjdjj"+nn).className='bxx'; //将当前页面的ID设置为选中状态 nn++; if(nn>counts){nn=1;} //如果ID大于总图片数量。则从头开始循环 tt=setTimeout('change_img()',7000); //在4秒后重新执行change_img()方法. } function changeimg(n)//点击黑条上的链接执行的方法。 { nn=n; //当前页面的ID等于传入的N值, window.clearInterval(tt); //清除用于循环的TT //重新执行change_img();但change_img()内所调用的图片ID已经在此处被修改,会从新ID处开始执行. change_img(); } //样式表 document.write('<style>'); document.write('.axx{padding:1px 7px;border-left:#cccccc 1px solid;font-size:12px;}'); document.write('a.axx:link,a.axx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#666;}'); document.write('a.axx:active,a.axx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#999;}'); document.write('.bxx{padding:1px 7px;border-left:#cccccc 1px solid;}'); document.write('a.bxx:link,a.bxx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#009900;}'); document.write('a.bxx:active,a.bxx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#ff9900;}'); document.write('</style>'); //内容部分 document.write('<div style="width:'+widthss+'px;height:'+heights+'px;overflow:hidden;text-overflow:clip;float:left;">'); document.write('<div><a id="url" target="_blank"><img id="pic" style="border:1px #cbcbcb solid;FILTER: progid:DXImageTransform.Microsoft.RevealTrans (duration=2,transition=23)" width='+widths+' height='+heights+' /></a></div>'); document.write('<div style="filter:alpha(style=1,opacity=10,finishOpacity=90);background: #888888;width:100%-2px;text-align:right;top:-16px;position:relative;margin:1px;height:14px;border:0px;padding-top:1px;z-index:4000;"><div>'); for(var i=1;i<counts+1;i++){document.write('<a href="javascript:changeimg('+i+');" id="xxjdjj'+i+'" class="axx" target="_self">'+i+'</a>');} document.write('</div></div></div>'); document.write('<div align=center><input id="title" type="txt" style="height:20px;background-color:#f2f6fb;border:0px solid #f2f6fb;width:'+widthss+'px;color:#ff8800;font-size:9pt;position:relative;padding-top:1;text-align:center;"></div>'); //document.write('</div>'); //开始执行滚动操作 change_img(); //--> </SCRIPT> </div> [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]